<template>
  <el-row
    v-loading="loading"
    style="height: 100%;overflow-y: hidden;width: 100%;border-left: 1px solid #E6E6E6"
  >
    <el-tooltip :content="$t('chart.draw_back')">
      <el-button
        class="el-icon-d-arrow-right"
        style="position:absolute;left: 4px;top: 5px;z-index: 1"
        size="mini"
        circle
        @click="closePanelEdit"
      />
    </el-tooltip>
    <el-row
      style="height: 40px;"
      class="padding-lr"
    >
      <el-popover
        placement="right-start"
        width="400"
        trigger="click"
        @show="showTab"
        @hide="hideTab"
      >
        <dataset-chart-detail
          type="chart"
          :data="view"
          :tab-status="tabStatus"
        />
        <svg-icon
          slot="reference"
          class="icon-class"
          style="position:absolute; margin-left: 30px; top:14px;cursor: pointer;"
          icon-class="icon_info_filled"
        />
      </el-popover>
      <span
        class="title-text view-title-name"
        style="line-height: 40px;"
      >{{ view.name }}</span>
      <span style="float: right;line-height: 40px;">
        <el-button
          round
          size="mini"
          :disabled="!hasEdit"
          @click="reset"
        >
          {{ $t('chart.recover') }}
        </el-button>
      </span>
    </el-row>
    <el-row class="view-panel-row">
      <el-tabs
        v-model="tabActive"
        :stretch="true"
        class="tab-header"
      >
        <el-tab-pane
          name="data"
          :label="$t('chart.chart_data')"
          class="padding-tab"
          style="width: 350px"
        >
          <div
            v-if="view.dataFrom==='template'"
            class="view-panel-Mask"
          >
            <span style="opacity: 1;">
              <el-button
                style="opacity: 1!important;"
                type="warning"
                :title="$t('chart.change_ds')"
                size="mini"
                round
                @click="changeDs"
              >
                <span style="font-weight: bold">{{ $t('panel.template_view_tips') }}<i
                  class="el-icon-refresh el-icon--right"
                /></span>
              </el-button>
            </span>
          </div>
          <el-row class="view-panel">
            <el-col
              class="theme-border-class"
              :span="11"
              style="border-right: 1px solid #E6E6E6;"
            >
              <div style="display: flex;align-items: center;justify-content: center;padding: 6px;">
                <el-input
                  v-model="searchField"
                  size="mini"
                  :placeholder="$t('chart.search')"
                  prefix-icon="el-icon-search"
                  clearable
                  class="main-area-input"
                />
                <el-dropdown
                  trigger="click"
                  size="mini"
                  @command="fieldEdit"
                >
                  <span class="el-dropdown-link">
                    <el-button
                      :title="$t('dataset.field_manage')"
                      icon="el-icon-setting"
                      type="text"
                      size="mini"
                      style="float: right;width: 20px;margin-left: 4px;"
                    />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      :disabled="!table || !hasDataPermission('manage',table.privileges)"
                      :command="beforeFieldEdit('ds')"
                      icon="el-icon-s-grid"
                    >
                      {{ $t('chart.ds_field_edit') }}
                    </el-dropdown-item>
                    <el-dropdown-item
                      :command="beforeFieldEdit('chart')"
                      icon="el-icon-s-data"
                    >
                      {{ $t('chart.chart_field_edit') }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-button
                  :title="$t('chart.change_ds')"
                  icon="el-icon-refresh"
                  type="text"
                  size="mini"
                  style="float: right;width: 20px;margin-left: 4px;"
                  @click="changeDs"
                />
              </div>

              <div
                v-if="fieldShow && tabActive === 'data'"
                class="field-split"
              >
                <fu-split-pane
                  top="50%"
                  direction="vertical"
                >
                  <template #top>
                    <div class="padding-lr field-height">
                      <span>{{ $t('chart.dimension') }}</span>
                      <draggable
                        v-if="table && hasDataPermission('use',table.privileges)"
                        v-model="dimensionData"
                        :options="{group:{name: 'drag',pull:'clone'},sort: true}"
                        animation="300"
                        :move="onMove"
                        class="drag-list"
                        @add="moveToDimension"
                      >
                        <transition-group>
                          <span
                            v-for="item in dimensionData"
                            :key="item.id"
                            class="item-dimension father"
                            :title="item.name"
                          >
                            <svg-icon
                              v-if="item.deType === 0"
                              icon-class="field_text"
                              class="field-icon-text"
                            />
                            <svg-icon
                              v-if="item.deType === 1"
                              icon-class="field_time"
                              class="field-icon-time"
                            />
                            <svg-icon
                              v-if="item.deType === 2 || item.deType === 3"
                              icon-class="field_value"
                              class="field-icon-value"
                            />
                            <svg-icon
                              v-if="item.deType === 5"
                              icon-class="field_location"
                              class="field-icon-location"
                            />
                            <span class="field-name">{{ item.name }}</span>
                            <el-dropdown
                              v-show="false"
                              placement="right-start"
                              trigger="click"
                              size="mini"
                              class="field-setting child"
                              @command="chartFieldEdit"
                            >
                              <span class="el-dropdown-link">
                                <i class="el-icon-s-tools" />
                              </span>
                              <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                  :command="handleChartFieldEdit(item,'copy')"
                                  icon="el-icon-document-copy"
                                >{{ $t('commons.copy') }}</el-dropdown-item>
                                <span v-if="item.chartId">
                                  <el-dropdown-item
                                    :command="handleChartFieldEdit(item,'edit')"
                                    icon="el-icon-edit"
                                  >{{ $t('commons.edit') }}</el-dropdown-item>
                                  <el-dropdown-item
                                    :command="handleChartFieldEdit(item,'delete')"
                                    icon="el-icon-delete"
                                  >{{ $t('commons.delete') }}</el-dropdown-item>
                                </span>
                              </el-dropdown-menu>
                            </el-dropdown>
                          </span>
                        </transition-group>
                      </draggable>
                    </div>
                  </template>
                  <template #bottom>
                    <div class="padding-lr field-height">
                      <span>{{ $t('chart.quota') }}</span>
                      <draggable
                        v-if="table && hasDataPermission('use',table.privileges)"
                        v-model="quotaData"
                        :options="{group:{name: 'drag',pull:'clone'},sort: true}"
                        animation="300"
                        :move="onMove"
                        class="drag-list"
                        @add="moveToQuota"
                      >
                        <transition-group>
                          <span
                            v-for="item in quotaData"
                            v-show="chart.type && (chart.type !== 'table-info' || (chart.type === 'table-info' && item.id !=='count'))&& (chart.type !== 'table-element' || (chart.type === 'table-element' && item.id !=='count'))"
                            :key="item.id"
                            class="item-quota father"
                            :title="item.name"
                          >
                            <svg-icon
                              v-if="item.deType === 0"
                              icon-class="field_text"
                              class="field-icon-text"
                            />
                            <svg-icon
                              v-if="item.deType === 1"
                              icon-class="field_time"
                              class="field-icon-time"
                            />
                            <svg-icon
                              v-if="item.deType === 2 || item.deType === 3"
                              icon-class="field_value"
                              class="field-icon-value"
                            />
                            <svg-icon
                              v-if="item.deType === 5"
                              icon-class="field_location"
                              class="field-icon-location"
                            />
                            <span class="field-name">{{ item.name }}</span>
                            <el-dropdown
                              v-show="false"
                              v-if="item.id !== 'count'"
                              placement="right-start"
                              trigger="click"
                              size="mini"
                              class="field-setting child"
                              @command="chartFieldEdit"
                            >
                              <span class="el-dropdown-link">
                                <i class="el-icon-s-tools" />
                              </span>
                              <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                  :command="handleChartFieldEdit(item,'copy')"
                                  icon="el-icon-document-copy"
                                >{{ $t('commons.copy') }}</el-dropdown-item>
                                <span v-if="item.chartId">
                                  <el-dropdown-item
                                    :command="handleChartFieldEdit(item,'edit')"
                                    icon="el-icon-edit"
                                  >{{ $t('commons.edit') }}</el-dropdown-item>
                                  <el-dropdown-item
                                    :command="handleChartFieldEdit(item,'delete')"
                                    icon="el-icon-delete"
                                  >{{ $t('commons.delete') }}</el-dropdown-item>
                                </span>
                              </el-dropdown-menu>
                            </el-dropdown>
                          </span>
                        </transition-group>
                      </draggable>
                    </div>
                  </template>
                </fu-split-pane>
              </div>
            </el-col>

            <el-col
              :span="13"
              style="height: 100%;border-right: 1px solid #E6E6E6;"
              class="theme-border-class"
            >
              <div
                style="height: 60px;overflow:auto"
                class="padding-lr theme-border-class"
              >
                <span class="theme-border-class">
                  <span>{{ $t('chart.chart_type') }}</span>
                  <el-row style="padding: 4px 0 4px 10px;">
                    <span>
                      <svg-icon
                        :icon-class="view.isPlugin && view.type && view.type !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + view.type + '/svg') : view.type"
                        class="chart-icon"
                      />
                    </span>
                    <span style="float: right;">
                      <el-popover
                        placement="bottom-end"
                        width="400"
                        trigger="click"
                        :append-to-body="true"
                      >
                        <div class="padding-lr">
                          <span>
                            <span class="theme-border-class">{{ $t('chart.chart_type') }}</span>
                            <span style="float: right;">
                              <el-select
                                v-model="view.render"
                                class="render-select"
                                style="width: 100px"
                                size="mini"
                                @change="changeChartRender()"
                              >
                                <el-option
                                  v-for="item in pluginRenderOptions"
                                  :key="item.value"
                                  :value="item.value"
                                  :label="item.name"
                                />
                              </el-select>
                            </span>
                          </span>
                          <el-row>
                            <div>
                              <el-radio-group
                                v-model="view.type"
                                style="width: 100%"
                                @change="changeChartType()"
                              >
                                <chart-type
                                  ref="cu-chart-type"
                                  :chart="view"
                                  style="height: 480px"
                                />
                              </el-radio-group>
                            </div>
                          </el-row>
                        </div>
                        <el-button
                          slot="reference"
                          size="mini"
                          style="padding: 6px;"
                        >
                          {{ $t('chart.change_chart_type') }}
                          <i class="el-icon-caret-bottom" />
                        </el-button>
                      </el-popover>
                    </span>
                  </el-row>
                </span>
              </div>
              <div
                style="overflow:auto;border-top: 1px solid #e6e6e6"
                class="attr-style theme-border-class"
              >
                <el-row style="height: 100%;">
                  <el-row class="padding-lr">
                    <span
                      v-show="view.type==='richTextView'"
                      style="color: #909399; font-size: 8px;width: 80px;text-align: right;"
                    >
                      Tips:{{ $t('chart.rich_text_view_result_tips') }}
                    </span>
                    <span
                      v-show="view.type!=='richTextView'"
                      style="width: 80px;text-align: right;"
                    >
                      {{ $t('chart.result_count') }}
                    </span>
                    <el-row v-show="view.type!=='richTextView'">
                      <el-radio-group
                        v-model="view.resultMode"
                        class="radio-span"
                        size="mini"
                        @change="calcData"
                      >
                        <el-radio label="all"><span>{{ $t('chart.result_mode_all') }}</span></el-radio>
                        <el-radio label="custom">
                          <el-input
                            v-model="view.resultCount"
                            class="result-count"
                            size="mini"
                            @change="calcData"
                          />
                        </el-radio>
                      </el-radio-group>
                    </el-row>
                  </el-row>
                  <el-row class="padding-lr">
                    <!--                    <span-->
                    <!--                      style="color: #909399; font-size: 8px;width: 80px;text-align: right;"-->
                    <!--                    >-->
                    <!--                      Tips:{{ $t('chart.rich_text_view_result_tips') }}-->
                    <!--                    </span>-->
                    <span
                      style="width: 80px;text-align: right;"
                    >
                      {{ $t('panel.refresh_frequency') }}
                    </span>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      placement="bottom"
                    >
                      <div slot="content">
                        {{ $t('chart.chart_refresh_tips') }}
                      </div>
                      <i
                        class="el-icon-info"
                        style="cursor: pointer;color: #606266;font-size: 12px"
                      />
                    </el-tooltip>
                    <span class="padding-lr">
                      <el-checkbox
                        v-model="view.refreshViewEnable"
                        class="el-input-refresh-loading"
                        @change="refreshAttrChange"
                      />
                      {{ $t('panel.enable_refresh_view') }}
                    </span>
                    <el-row>
                      <el-input
                        v-model="view.refreshTime"
                        class="el-input-refresh-time"
                        type="number"
                        size="mini"
                        controls-position="right"
                        :min="1"
                        :max="3600"
                        :disabled="!view.refreshViewEnable"
                        @change="refreshAttrChange"
                      />
                      <el-select
                        v-model="view.refreshUnit"
                        class="el-input-refresh-unit margin-left8"
                        size="mini"
                        :disabled="!view.refreshViewEnable"
                        @change="refreshAttrChange"
                      >
                        <el-option
                          :label="$t('panel.minute')"
                          :value="'minute'"
                        />
                        <el-option
                          :label="$t('panel.second')"
                          :value="'second'"
                        />
                      </el-select>
                    </el-row>
                  </el-row>

                  <plugin-com
                    v-if="view.isPlugin"
                    :component-name="view.type + '-data'"
                    :obj="{view, param, chart, dimensionData, quotaData}"
                  />
                  <div v-else>

                    <el-row
                      v-if="view.type ==='map'"
                      class="padding-lr"
                    >
                      <span style="width: 80px;text-align: right;">
                        <span>{{ $t('chart.map_range') }}</span>
                      </span>
                      <span class="tree-select-span">
                        <treeselect
                          ref="mapSelector"
                          v-model="view.customAttr.areaCode"
                          :options="places"
                          :placeholder="$t('chart.select_map_range')"
                          :normalizer="normalizer"
                          :no-children-text="$t('commons.treeselect.no_children_text')"
                          :no-options-text="$t('commons.treeselect.no_options_text')"
                          :no-results-text="$t('commons.treeselect.no_results_text')"
                          @input="calcData"
                          @deselect="calcData"
                        />
                      </span>
                    </el-row>

                    <!--xAxisExt-->
                    <el-row
                      v-if="view.type === 'table-pivot'"
                      class="padding-lr"
                    >
                      <span class="data-area-label">
                        <span>{{ $t('chart.table_pivot_row') }}</span>
                        /
                        <span>{{ $t('chart.dimension') }}</span>
                        <i
                          class="el-icon-arrow-down el-icon-delete data-area-clear"
                          @click="clearData('xaxisExt')"
                        />
                      </span>
                      <draggable
                        v-model="view.xaxisExt"
                        group="drag"
                        animation="300"
                        :move="onMove"
                        class="drag-block-style"
                        @add="addXaxisExt"
                        @update="calcData(true)"
                      >
                        <transition-group class="draggable-group">
                          <dimension-ext-item
                            v-for="(item,index) in view.xaxisExt"
                            :key="item.id"
                            :param="param"
                            :index="index"
                            :item="item"
                            :dimension-data="dimension"
                            :quota-data="quota"
                            :chart="chart"
                            @onDimensionItemChange="dimensionItemChange"
                            @onDimensionItemRemove="dimensionItemRemove"
                            @editItemFilter="showDimensionEditFilter"
                            @onNameEdit="showRename"
                          />
                        </transition-group>
                      </draggable>
                      <div
                        v-if="!view.xaxisExt || view.xaxisExt.length === 0"
                        class="drag-placeholder-style"
                      >
                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                      </div>
                    </el-row>
                    <!--xAxis-->
                    <el-row
                      v-if="view.type !=='text' && view.type !== 'gauge' && view.type !== 'liquid'"
                      class="padding-lr"
                    >
                      <span class="data-area-label">
                        <span v-if="view.type && view.type.includes('table')">{{
                          $t('chart.drag_block_table_data_column')
                        }}</span>
                        <span
                          v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall' || view.type === 'area')"
                        >{{ $t('chart.drag_block_type_axis') }}</span>
                        <span
                          v-else-if="view.type && view.type.includes('pie')"
                        >{{ $t('chart.drag_block_pie_label') }}</span>
                        <span v-else-if="view.type && view.type.includes('funnel')">{{
                          $t('chart.drag_block_funnel_split')
                        }}</span>
                        <span v-else-if="view.type && view.type.includes('radar')">{{
                          $t('chart.drag_block_radar_label')
                        }}</span>
                        <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
                        <span v-else-if="view.type && view.type.includes('treemap')">{{
                          $t('chart.drag_block_treemap_label')
                        }}</span>
                        <span v-else-if="view.type && view.type === 'word-cloud'">{{
                          $t('chart.drag_block_word_cloud_label')
                        }}</span>
                        <span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_label') }}</span>
                        <span v-else-if="view.type === 'flow-map'">{{ $t('chart.start_point') }}</span>
                        <span v-show="view.type !== 'richTextView'"> / </span>
                        <span v-if="view.type && view.type !== 'table-info' && view.type !== 'table-element'">
                          {{ $t('chart.dimension') }}
                        </span>
                        <span
                          v-else-if="view.type && view.type === 'table-info' || view.type === 'table-element'"
                        >{{ $t('chart.dimension_or_quota') }}</span>
                        <i
                          class="el-icon-arrow-down el-icon-delete data-area-clear"
                          @click="clearData('xaxis')"
                        />
                      </span>
                      <draggable
                        v-model="view.xaxis"
                        group="drag"
                        animation="300"
                        :move="onMove"
                        class="drag-block-style"
                        @add="addXaxis"
                        @update="calcData(true)"
                      >
                        <transition-group class="draggable-group">
                          <dimension-item
                            v-for="(item,index) in view.xaxis"
                            :key="item.id"
                            :param="param"
                            :index="index"
                            :item="item"
                            :dimension-data="dimension"
                            :quota-data="quota"
                            :chart="chart"
                            @onDimensionItemChange="dimensionItemChange"
                            @onDimensionItemRemove="dimensionItemRemove"
                            @editItemFilter="showDimensionEditFilter"
                            @onNameEdit="showRename"
                            @valueFormatter="valueFormatter"
                            @onCustomSort="onCustomSort"
                          />
                        </transition-group>
                      </draggable>
                      <div
                        v-if="!view.xaxis || view.xaxis.length === 0"
                        class="drag-placeholder-style"
                      >
                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                      </div>
                    </el-row>
                    <!--group field,use xaxisExt-->
                    <el-row
                      v-if="view.type === 'bar-group'
                        || view.type === 'bar-group-stack'
                        || (view.render === 'antv' && view.type === 'line')
                        || view.type === 'flow-map'"
                      class="padding-lr"
                    >
                      <span class="data-area-label">
                        <span>
                          <span v-if="view.type !=='flow-map'">{{ $t('chart.chart_group') }}</span>
                          <span v-else-if="view.type === 'flow-map'">{{ $t('chart.end_point') }}</span>
                          <span
                            v-show="view.type !== 'line'"
                            style="color:#F54A45;"
                          >*</span>
                        </span>
                        /
                        <span>{{ $t('chart.dimension') }}</span>
                        <el-tooltip
                          v-show="view.type !== 'line'"
                          class="item"
                          effect="dark"
                          placement="bottom"
                        >
                          <div slot="content">
                            {{ $t('chart.sub_dimension_tip') }}
                          </div>
                          <i
                            class="el-icon-info"
                            style="cursor: pointer;color: #606266;"
                          />
                        </el-tooltip>
                        <i
                          class="el-icon-arrow-down el-icon-delete data-area-clear"
                          @click="clearData('xaxisExt')"
                        />
                      </span>
                      <draggable
                        v-model="view.xaxisExt"
                        group="drag"
                        animation="300"
                        :move="onMove"
                        class="drag-block-style"
                        @add="addXaxisExt"
                        @update="calcData(true)"
                      >
                        <transition-group class="draggable-group">
                          <dimension-ext-item
                            v-for="(item,index) in view.xaxisExt"
                            :key="item.id"
                            :param="param"
                            :index="index"
                            :item="item"
                            :dimension-data="dimension"
                            :quota-data="quota"
                            :chart="chart"
                            @onDimensionItemChange="dimensionItemChange"
                            @onDimensionItemRemove="dimensionItemRemove"
                            @editItemFilter="showDimensionEditFilter"
                            @onNameEdit="showRename"
                          />
                        </transition-group>
                      </draggable>
                      <div
                        v-if="!view.xaxisExt || view.xaxisExt.length === 0"
                        class="drag-placeholder-style"
                      >
                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                      </div>
                    </el-row>
                    <!--yaxis-->
                    <el-row
                      v-if="!equalsAny(view.type , 'table-info','table-element', 'label', 'flow-map')"
                      class="padding-lr"
                      style="margin-top: 6px;"
                    >
                      <span class="data-area-label">
                        <span v-if="view.type && view.type.includes('table')">{{
                          $t('chart.drag_block_table_data_column')
                        }}</span>
                        <span
                          v-else-if="view.type
                            && (includesAny(view.type,'bar','line','scatter')
                              || equalsAny(view.type,'waterfall','area','flow-map'))"
                        >{{ $t('chart.drag_block_value_axis') }}</span>
                        <span
                          v-else-if="view.type && view.type.includes('pie')"
                        >{{ $t('chart.drag_block_pie_angel') }}</span>
                        <span v-else-if="view.type && view.type.includes('funnel')">{{
                          $t('chart.drag_block_funnel_width')
                        }}</span>
                        <span v-else-if="view.type && view.type.includes('radar')">{{
                          $t('chart.drag_block_radar_length')
                        }}</span>
                        <span v-else-if="view.type && view.type.includes('gauge')">{{
                          $t('chart.drag_block_gauge_angel')
                        }}</span>
                        <span
                          v-else-if="view.type && view.type.includes('text')"
                        >{{ $t('chart.drag_block_label_value') }}</span>
                        <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
                        <span v-else-if="view.type && view.type.includes('tree')">{{
                          $t('chart.drag_block_treemap_size')
                        }}</span>
                        <span v-else-if="view.type && view.type === 'chart-mix'">{{
                          $t('chart.drag_block_value_axis_main')
                        }}</span>
                        <span
                          v-else-if="view.type && view.type === 'liquid'"
                        >{{ $t('chart.drag_block_progress') }}</span>
                        <span v-else-if="view.type && view.type === 'word-cloud'">{{
                          $t('chart.drag_block_word_cloud_size')
                        }}</span>
                        <span v-show="view.type !== 'richTextView'"> / </span>
                        <span>{{ $t('chart.quota') }}</span>
                        <i
                          class="el-icon-arrow-down el-icon-delete data-area-clear"
                          @click="clearData('yaxis')"
                        />
                      </span>
                      <draggable
                        v-model="view.yaxis"
                        group="drag"
                        animation="300"
                        :move="onMove"
                        class="drag-block-style"
                        @add="addYaxis"
                        @update="calcData(true)"
                      >
                        <transition-group class="draggable-group">
                          <quota-item
                            v-for="(item,index) in view.yaxis"
                            :key="item.id"
                            :param="param"
                            :index="index"
                            :item="item"
                            :chart="chart"
                            :dimension-data="dimension"
                            :quota-data="quota"
                            @onQuotaItemChange="quotaItemChange"
                            @onQuotaItemRemove="quotaItemRemove"
                            @editItemFilter="showQuotaEditFilter"
                            @onNameEdit="showRename"
                            @editItemCompare="showQuotaEditCompare"
                            @valueFormatter="valueFormatter"
                          />
                        </transition-group>
                      </draggable>
                      <div
                        v-if="!view.yaxis || view.yaxis.length === 0"
                        class="drag-placeholder-style"
                      >
                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                      </div>
                    </el-row>
                    <!--yAxisExt-->
                    <el-row
                      v-if="view.type && view.type === 'chart-mix'"
                      class="padding-lr"
                      style="margin-top: 6px;"
                    >
                      <span class="data-area-label">
                        <span>{{ $t('chart.drag_block_value_axis_ext') }}</span>
                        /
                        <span>{{ $t('chart.quota') }}</span>
                        <i
                          class="el-icon-arrow-down el-icon-delete data-area-clear"
                          @click="clearData('yaxisExt')"
                        />
                      </span>
                      <draggable
                        v-model="view.yaxisExt"
                        group="drag"
                        animation="300"
                        :move="onMove"
                        class="drag-block-style"
                        @add="addYaxisExt"
                        @update="calcData(true)"
                      >
                        <transition-group class="draggable-group">
                          <quota-ext-item
                            v-for="(item,index) in view.yaxisExt"
                            :key="item.id"
                            :param="param"
                            :index="index"
                            :item="item"
                            :chart="chart"
                            :dimension-data="dimension"
                            :quota-data="quota"
                            @onQuotaItemChange="quotaItemChange"
                            @onQuotaItemRemove="quotaItemRemove"
                            @editItemFilter="showQuotaEditFilter"
                            @onNameEdit="showRename"
                            @editItemCompare="showQuotaEditCompare"
                          />
                        </transition-group>
                      </draggable>
                      <div
                        v-if="!view.yaxisExt || view.yaxisExt.length === 0"
                        class="drag-placeholder-style"
                      >
                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                      </div>
                    </el-row>
                    <!--extStack-->
                    <el-row
                      v-if="view.type && view.type.includes('stack')"
                      class="padding-lr"
                      style="margin-top: 6px;"
                    >
                      <span class="data-area-label">
                        <span>{{ $t('chart.stack_item') }}</span>
                        /
                        <span>{{ $t('chart.dimension') }}</span>
                        <i
                          class="el-icon-arrow-down el-icon-delete data-area-clear"
                          @click="clearData('extStack')"
                        />
                      </span>
                      <draggable
                        v-model="view.extStack"
                        group="drag"
                        animation="300"
                        :move="onMove"
                        class="drag-block-style"
                        @add="addStack"
                        @update="calcData(true)"
                      >
                        <transition-group class="draggable-group">
                          <chart-drag-item
                            v-for="(item,index) in view.extStack"
                            :key="item.id"
                            :conf="'sort'"
                            :param="param"
                            :index="index"
                            :item="item"
                            :dimension-data="dimension"
                            :quota-data="quota"
                            @onItemChange="stackItemChange"
                            @onItemRemove="stackItemRemove"
                            @onItemCustomSort="stackItemCustomSort"
                          />
                        </transition-group>
                      </draggable>
                      <div
                        v-if="!view.extStack || view.extStack.length === 0"
                        class="drag-placeholder-style"
                      >
                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                      </div>
                    </el-row>
                    <!--extBubble-->
                    <el-row
                      v-if="view.type && view.type.includes('scatter')"
                      class="padding-lr"
                      style="margin-top: 6px;"
                    >
                      <span class="data-area-label">
                        <span>{{ $t('chart.bubble_size') }}</span>
                        /
                        <span>{{ $t('chart.quota') }}</span>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          placement="bottom"
                        >
                          <div slot="content">
                            {{ $t('chart.scatter_tip') }}
                          </div>
                          <i
                            class="el-icon-info"
                            style="cursor: pointer;color: #606266;"
                          />
                        </el-tooltip>
                        <i
                          class="el-icon-arrow-down el-icon-delete data-area-clear"
                          @click="clearData('extBubble')"
                        />
                      </span>
                      <draggable
                        v-model="view.extBubble"
                        group="drag"
                        animation="300"
                        :move="onMove"
                        class="drag-block-style"
                        @add="addBubble"
                        @update="calcData(true)"
                      >
                        <transition-group class="draggable-group">
                          <chart-drag-item
                            v-for="(item,index) in view.extBubble"
                            :key="item.id"
                            :conf="'summary'"
                            :param="param"
                            :index="index"
                            :item="item"
                            :dimension-data="dimension"
                            :quota-data="quota"
                            @onItemChange="bubbleItemChange"
                            @onItemRemove="bubbleItemRemove"
                          />
                        </transition-group>
                      </draggable>
                      <div
                        v-if="!view.extBubble || view.extBubble.length === 0"
                        class="drag-placeholder-style"
                      >
                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                      </div>
                    </el-row>

                    <mark-map-data-editor
                      v-if="view.type === 'map'"
                      :view="view"
                      :param="param"
                      :dimension-data="dimension"
                      :quota-data="quota"
                      @clear-data="clearData"
                      @calc-data="calcData"
                    />

                    <el-row
                      class="padding-lr"
                      style="margin-top: 6px;"
                    >
                      <span>{{ $t('chart.result_filter') }}</span>
                      <draggable
                        v-model="view.customFilter"
                        group="drag"
                        animation="300"
                        :move="onMove"
                        class="theme-item-class"
                        style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
                        @add="addCustomFilter"
                        @update="calcData(true)"
                      >
                        <transition-group class="draggable-group">
                          <filter-item
                            v-for="(item,index) in view.customFilter"
                            :key="item.id"
                            :param="param"
                            :index="index"
                            :item="item"
                            :dimension-data="dimension"
                            :quota-data="quota"
                            @onFilterItemRemove="filterItemRemove"
                            @editItemFilter="showEditFilter"
                          />
                        </transition-group>
                      </draggable>
                      <div
                        v-if="!view.customFilter || view.customFilter.length === 0"
                        class="drag-placeholder-style"
                      >
                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                      </div>
                    </el-row>
                    <el-row
                      v-if="view.type
                        && !(view.type.includes('table') && view.render === 'echarts')
                        && !view.type.includes('text') && !view.type.includes('gauge')
                        && view.type !== 'liquid' && view.type !== 'word-cloud'
                        && view.type !== 'table-pivot' && view.type !=='label'
                        && view.type !=='richTextView' && view.type !== 'flow-map'"
                      class="padding-lr"
                      style="margin-top: 6px;"
                    >
                      <span style="width: 80px;text-align: right;">
                        <span>{{ $t('chart.drill') }}</span>
                        /
                        <span>{{ $t('chart.dimension') }}</span>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          placement="bottom"
                        >
                          <div slot="content">
                            {{ $t('chart.drill_dimension_tip') }}
                          </div>
                          <i
                            class="el-icon-info"
                            style="cursor: pointer;color: #606266;"
                          />
                        </el-tooltip>
                      </span>
                      <draggable
                        v-model="view.drillFields"
                        group="drag"
                        animation="300"
                        :move="onMove"
                        class="drag-block-style"
                        @add="addDrill"
                        @update="calcData(true)"
                      >
                        <transition-group class="draggable-group">
                          <drill-item
                            v-for="(item,index) in view.drillFields"
                            :key="item.id"
                            :param="param"
                            :index="index"
                            :item="item"
                            :dimension-data="dimension"
                            :quota-data="quota"
                            @onDimensionItemChange="drillItemChange"
                            @onDimensionItemRemove="drillItemRemove"
                          />
                        </transition-group>
                      </draggable>
                      <div
                        v-if="!view.drillFields || view.drillFields.length === 0"
                        class="drag-placeholder-style"
                      >
                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                      </div>
                    </el-row>
                  </div>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane
          name="style"
          :label="$t('chart.chart_style')"
          class="padding-tab"
          style="width: 350px"
        >
          <chart-style
            v-if="chartProperties || view.isPlugin"
            :param="param"
            :view="view"
            :chart="chart"
            :properties="chartProperties"
            :property-inner-all="chartPropertyInnerAll"
            :dimension-data="dimensionData"
            :quota-data="quotaData"
            @calcStyle="calcStyle"
            @onColorChange="onColorChange"
            @onSizeChange="onSizeChange"
            @onFieldChange="onFieldChange"
            @onLabelChange="onLabelChange"
            @onTooltipChange="onTooltipChange"
            @onTotalCfgChange="onTotalCfgChange"
            @onChangeXAxisForm="onChangeXAxisForm"
            @onChangeYAxisForm="onChangeYAxisForm"
            @onChangeYAxisExtForm="onChangeYAxisExtForm"
            @onChangeSplitForm="onChangeSplitForm"
            @onTextChange="onTextChange"
            @onLegendChange="onLegendChange"
            @onMarginChange="onMarginChange"
            @onChangeBackgroundForm="onChangeBackgroundForm"
            @onSuspensionChange="onSuspensionChange"
            @onMarkChange="onMarkChange"
            @onMapChange="onMapChange"
          />
        </el-tab-pane>
        <el-tab-pane
          name="senior"
          :label="$t('chart.senior')"
          class="padding-tab"
          style="width: 350px;"
        >
          <el-row class="view-panel">
            <div
              v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || view.type === 'label' || view.type.includes('table') || view.type === 'map' || view.type === 'buddle-map')"
              style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
              class="attr-style theme-border-class"
            >
              <el-row
                v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix') || view.type === 'table-normal' || view.type === 'table-info' || view.type === 'table-element')"
              >
                <span class="padding-lr">{{ $t('chart.senior_cfg') }}</span>
                <el-collapse
                  v-model="attrActiveNames"
                  class="style-collapse"
                >
                  <el-collapse-item
                    v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix'))"
                    name="function"
                    :title="$t('chart.function_cfg')"
                  >
                    <function-cfg
                      :param="param"
                      class="attr-selector"
                      :chart="chart"
                      @onFunctionCfgChange="onFunctionCfgChange"
                    />
                  </el-collapse-item>
                  <el-collapse-item
                    v-if="view.type && (view.type === 'table-normal' || view.type === 'table-info')"
                    name="scroll"
                    :title="$t('chart.scroll_cfg')"
                  >
                    <scroll-cfg
                      :param="param"
                      class="attr-selector"
                      :chart="chart"
                      @onScrollCfgChange="onScrollChange"
                    />
                  </el-collapse-item>
                </el-collapse>
              </el-row>
              <el-row
                v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || view.type === 'label' || (view.render === 'antv' && view.type.includes('table')))"
              >
                <span class="padding-lr">{{ $t('chart.analyse_cfg') }}</span>
                <el-collapse
                  v-model="styleActiveNames"
                  class="style-collapse"
                >
                  <el-collapse-item
                    v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix'))"
                    name="analyse"
                    :title="$t('chart.assist_line')"
                  >
                    <assist-line
                      :param="param"
                      class="attr-selector"
                      :chart="chart"
                      :quota-data="view.yaxis"
                      @onAssistLineChange="onAssistLineChange"
                    />
                  </el-collapse-item>
                  <el-collapse-item
                    v-if="view.type && (view.type.includes('gauge') || view.type === 'text' || view.type === 'label' || (view.render === 'antv' && view.type.includes('table')))"
                    name="threshold"
                    :title="$t('chart.threshold')"
                  >
                    <threshold
                      :param="param"
                      class="attr-selector"
                      :chart="chart"
                      @onThresholdChange="onThresholdChange"
                    />
                  </el-collapse-item>
                </el-collapse>
              </el-row>

              <el-row v-if="view.type && (view.type === 'map' || view.type === 'buddle-map')">

                <span
                  v-if="false"
                  class="padding-lr"
                >{{ $t('chart.senior_cfg') }}</span>
                <el-collapse
                  v-model="mapActiveNames"
                  class="style-collapse"
                >

                  <el-collapse-item
                    :title="$t('chart.place_name_mapping')"
                    name="map-mapping"
                  >
                    <map-mapping
                      :param="param"
                      class="attr-selector"
                      :chart="chart"
                      :dynamic-area-code="currentAreaCode"
                      @onMapMappingChange="onMapMappingChange"
                    />

                  </el-collapse-item>

                </el-collapse>
              </el-row>

            </div>
            <div
              v-else
              class="no-senior"
            >
              {{ $t('chart.chart_no_senior') }}
            </div>
          </el-row>
        </el-tab-pane>
        <el-tab-pane
          v-if="!curComponent.auxiliaryMatrix"
          name="position"
          :label="$t('panel.position_adjust')"
          class="padding-tab"
          style="width: 350px;"
        >
          <div class="attr-style theme-border-class">
            <el-collapse
              v-model="positionActiveNames"
              class="style-collapse"
            >
              <el-collapse-item
                :title="$t('panel.position_adjust_component')"
                :name="'positionAdjust'"
              >
                <position-adjust />
              </el-collapse-item>
            </el-collapse>
          </div>

        </el-tab-pane>

      </el-tabs>

      <el-col
        v-if="editFrom==='view'"
        style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;"
      >
        <el-row
          style="width: 100%;height: 100%;"
          class="padding-lr"
        >
          <div
            ref="imageWrapper"
            style="height: 100%"
          >
            <plugin-com
              v-if="httpRequest.status && chart.type && view.isPlugin"
              ref="dynamicChart"
              :component-name="chart.type + '-view'"
              :obj="{chart}"
              :chart-id="chart.id"
              :chart="chart"
              :theme-style="curComponent.commonBackground"
              class="chart-class"
              @onChartClick="chartClick"
            />
            <chart-component
              v-else-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label' && renderComponent() === 'echarts'"
              ref="dynamicChart"
              :chart-id="chart.id"
              :chart="chart"
              class="chart-class"
              :theme-style="curComponent.commonBackground"
              @onChartClick="chartClick"
            />
            <chart-component-g2
              v-else-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label' && renderComponent() === 'antv'"
              ref="dynamicChart"
              :chart-id="chart.id"
              :chart="chart"
              class="chart-class"
              @onChartClick="chartClick"
            />
            <chart-component-s2
              v-else-if="httpRequest.status && chart.type && chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label' && renderComponent() === 'antv'"
              ref="dynamicChart"
              :chart-id="chart.id"
              :chart="chart"
              class="chart-class"
              @onChartClick="chartClick"
            />
            <table-normal
              v-else-if="httpRequest.status && chart.type && chart.type.includes('table') && renderComponent() === 'echarts' && chart.type !== 'table-pivot'"
              :show-summary="chart.type === 'table-normal'"
              :chart="chart"
              class="table-class"
            />
            <label-normal
              v-else-if="httpRequest.status && chart.type && chart.type.includes('text')"
              :chart="chart"
              class="table-class"
            />
            <label-normal-text
              v-else-if="httpRequest.status && chart.type && chart.type === 'label'"
              :chart="chart"
              class="table-class"
            />
            <div
              v-if="!httpRequest.status"
              class="chart-error-class"
            >
              <div
                style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;"
              >
                {{ httpRequest.msg }},{{ $t('chart.chart_show_error') }}
                <br>
                {{ $t('chart.chart_error_tips') }}
              </div>
            </div>
          </div>
          <div style="position: absolute;left: 8px;bottom:8px;">
            <drill-path
              :drill-filters="drillFilters"
              @onDrillJump="drillJump"
            />
          </div>
        </el-row>
      </el-col>
    </el-row>

    <!--显示名修改-->
    <el-dialog
      v-dialogDrag
      :title="$t('chart.show_name_set')"
      :visible="renameItem"
      :show-close="false"
      width="30%"
    >
      <el-form
        ref="itemForm"
        label-width="80px"
        :model="itemForm"
        :rules="itemFormRules"
      >
        <el-form-item
          :label="$t('dataset.field_origin_name')"
          class="form-item"
        >
          <span style="padding: 0 16px;">{{ itemForm.dsFieldName }}</span>
        </el-form-item>
        <el-form-item
          :label="$t('chart.show_name')"
          class="form-item"
        >
          <el-input
            v-model="itemForm.name"
            style="width: 200px"
            size="mini"
            clearable
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="closeRename()"
        >{{ $t('chart.cancel') }}
        </el-button>
        <el-button
          type="primary"
          size="mini"
          @click="saveRename"
        >{{ $t('chart.confirm') }}
        </el-button>
      </div>
    </el-dialog>

    <!--指标过滤器-->
    <el-dialog
      v-if="quotaFilterEdit"
      v-dialogDrag
      :title="$t('chart.add_filter')"
      :visible="quotaFilterEdit"
      :show-close="false"
      width="800px"
      class="dialog-css"
    >
      <quota-filter-editor :item="quotaItem" />
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="closeQuotaFilter"
        >{{ $t('chart.cancel') }}
        </el-button>
        <el-button
          type="primary"
          size="mini"
          @click="saveQuotaFilter"
        >{{ $t('chart.confirm') }}
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-if="dimensionFilterEdit"
      v-dialogDrag
      :title="$t('chart.add_filter')"
      :visible="dimensionFilterEdit"
      :show-close="false"
      width="800px"
      class="dialog-css"
    >
      <dimension-filter-editor :item="dimensionItem" />
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="closeDimensionFilter"
        >{{ $t('chart.cancel') }}
        </el-button>
        <el-button
          type="primary"
          size="mini"
          @click="saveDimensionFilter"
        >{{ $t('chart.confirm') }}
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-if="resultFilterEdit"
      v-dialogDrag
      :title="$t('chart.add_filter')"
      :visible="resultFilterEdit"
      :show-close="false"
      width="800px"
      class="dialog-css"
    >
      <result-filter-editor
        :chart="chartForFilter"
        :item="filterItem"
      />
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="closeResultFilter"
        >{{ $t('chart.cancel') }}
        </el-button>
        <el-button
          type="primary"
          size="mini"
          @click="saveResultFilter"
        >{{ $t('chart.confirm') }}
        </el-button>
      </div>
    </el-dialog>

    <!--视图更换数据集-->
    <el-dialog
      v-if="selectTableFlag"
      v-dialogDrag
      :title="changeDsTitle"
      :visible="selectTableFlag"
      :show-close="false"
      width="70%"
      class="dialog-css"
    >
      <table-selector
        :checked-table="table"
        @getTable="getTable"
      />
      <p style="margin-top: 10px;color:#F56C6C;font-size: 12px;">{{ $t('chart.change_ds_tip') }}</p>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="closeChangeChart"
        >{{ $t('chart.cancel') }}
        </el-button>
        <el-button
          type="primary"
          size="mini"
          :disabled="!changeTable || !changeTable.id"
          @click="changeChart"
        >
          {{ $t('chart.confirm') }}
        </el-button>
      </div>
    </el-dialog>

    <!--编辑视图使用的数据集的字段-->
    <el-dialog
      v-if="editDsField"
      :visible="editDsField"
      :show-close="false"
      class="dialog-css"
      :fullscreen="true"
    >
      <field-edit
        :param="table"
        :table="table"
      />
      <div
        slot="title"
        class="dialog-footer title-text"
      >
        <span style="font-size: 14px;">
          {{ $t('chart.ds_field_edit') }}
          <span v-if="table">[{{ table.name }}]</span>
        </span>
        <el-button
          size="mini"
          style="float: right;"
          @click="closeEditDsField"
        >{{ $t('chart.close') }}
        </el-button>
      </div>
    </el-dialog>

    <!--编辑视图的字段-->
    <el-dialog
      v-if="showEditChartField"
      :visible="showEditChartField"
      :show-close="false"
      class="dialog-css"
      :fullscreen="true"
    >
      <chart-field-edit
        :param="chart"
        :table="table"
        :chart="chart"
      />
      <div
        slot="title"
        class="dialog-footer title-text"
      >
        <span style="font-size: 14px;">
          {{ $t('chart.chart_field_edit') }}
          <span v-if="table">[{{ chart.title }}]</span>
        </span>
        <el-button
          size="mini"
          style="float: right;"
          @click="closeEditChartField"
        >{{ $t('chart.close') }}
        </el-button>
      </div>
    </el-dialog>

    <!--同环比设置-->
    <el-dialog
      v-if="showEditQuotaCompare"
      v-dialogDrag
      :title="$t('chart.yoy_setting')"
      :visible="showEditQuotaCompare"
      :show-close="false"
      width="600px"
      class="dialog-css"
    >
      <compare-edit
        :compare-item="quotaItemCompare"
        :chart="chart"
      />
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="closeQuotaEditCompare"
        >{{ $t('chart.cancel') }}
        </el-button>
        <el-button
          type="primary"
          size="mini"
          @click="saveQuotaEditCompare"
        >{{ $t('chart.confirm') }}
        </el-button>
      </div>
    </el-dialog>

    <!--数值格式-->
    <el-dialog
      v-if="showValueFormatter"
      v-dialogDrag
      :title="$t('chart.value_formatter') + ' - ' + valueFormatterItem.name"
      :visible="showValueFormatter"
      :show-close="false"
      width="600px"
      class="dialog-css"
    >
      <value-formatter-edit
        :formatter-item="valueFormatterItem"
        :chart="chart"
      />
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="closeValueFormatter"
        >{{ $t('chart.cancel') }}
        </el-button>
        <el-button
          type="primary"
          size="mini"
          @click="saveValueFormatter"
        >{{ $t('chart.confirm') }}
        </el-button>
      </div>
    </el-dialog>

    <!--xAxis自定义排序-->
    <el-dialog
      v-if="showCustomSort"
      v-dialogDrag
      :title="$t('chart.custom_sort')"
      :visible="showCustomSort"
      :show-close="false"
      width="500px"
      class="dialog-css"
    >
      <custom-sort-edit
        :chart="chart"
        field-type="xAxis"
        :field="customSortField"
        @onSortChange="customSortChange"
      />
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="closeCustomSort"
        >{{ $t('chart.cancel') }}
        </el-button>
        <el-button
          type="primary"
          size="mini"
          @click="saveCustomSort"
        >{{ $t('chart.confirm') }}
        </el-button>
      </div>
    </el-dialog>

    <!--extStack自定义排序-->
    <el-dialog
      v-if="showStackCustomSort"
      v-dialogDrag
      :title="$t('chart.custom_sort')"
      :visible="showStackCustomSort"
      :show-close="false"
      width="500px"
      class="dialog-css"
    >
      <custom-sort-edit
        :chart="chart"
        field-type="extStack"
        :field="customSortField"
        @onSortChange="customSortChange"
      />
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="closeStackCustomSort"
        >{{ $t('chart.cancel') }}
        </el-button>
        <el-button
          type="primary"
          size="mini"
          @click="saveStackCustomSort"
        >{{ $t('chart.confirm') }}
        </el-button>
      </div>
    </el-dialog>

    <!--视图计算字段弹框-->
    <el-dialog
      v-if="editChartCalcField"
      v-dialogDrag
      :visible="editChartCalcField"
      :show-close="false"
      class="dialog-css"
      :title="$t('chart.copy_field')"
      append-to-body
    >
      <calc-chart-field-edit
        :param="chart"
        :field="currEditField"
        :mode="currEditField.extField === 1 ? 'copy' : 'normal'"
        @onEditClose="closeChartCalcField"
      />
    </el-dialog>
  </el-row>
</template>

<script>
import {
  ajaxGetDataOnly,
  getChartDetails,
  pluginTypes,
  post,
  resetViewCacheCallBack,
  tableField,
  viewEditSave
} from '@/api/chart/chart'
import DimensionItem from '../components/dragItem/DimensionItem'
import QuotaItem from '../components/dragItem/QuotaItem'
import FilterItem from '../components/dragItem/FilterItem'
import ChartDragItem from '../components/dragItem/ChartDragItem'
import DrillItem from '../components/dragItem/DrillItem'
import ResultFilterEditor from '../components/filter/ResultFilterEditor'
import ChartComponent from '../components/ChartComponent'
import DrillPath from '@/views/chart/view/DrillPath'
import bus from '@/utils/bus'
import DatasetChartDetail from '../../dataset/common/DatasetChartDetail'
// shape attr,component style
import {
  DEFAULT_COLOR_CASE,
  DEFAULT_FUNCTION_CFG,
  DEFAULT_LABEL,
  DEFAULT_LEGEND_STYLE,
  DEFAULT_SIZE,
  DEFAULT_SPLIT,
  DEFAULT_THRESHOLD,
  DEFAULT_TITLE_STYLE,
  DEFAULT_TOOLTIP,
  DEFAULT_TOTAL,
  DEFAULT_XAXIS_STYLE,
  DEFAULT_YAXIS_EXT_STYLE,
  DEFAULT_YAXIS_STYLE
} from '../chart/chart'
import QuotaFilterEditor from '../components/filter/QuotaFilterEditor'
import DimensionFilterEditor from '../components/filter/DimensionFilterEditor'
import TableNormal from '../components/table/TableNormal'
import LabelNormal from '../components/normal/LabelNormal'
// import html2canvas from 'html2canvasde'
import TableSelector from './TableSelector'
import FieldEdit from '../../dataset/data/FieldEdit'
import { areaMapping } from '@/api/map/map'
import QuotaExtItem from '@/views/chart/components/dragItem/QuotaExtItem'
import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
import ChartType from '@/views/chart/view/ChartType'
import CompareEdit from '@/views/chart/components/compare/CompareEdit'
import { compareItem } from '@/views/chart/chart/compare'
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import DimensionExtItem from '@/views/chart/components/dragItem/DimensionExtItem'
import PluginCom from '@/views/system/plugin/PluginCom'
import { mapState } from 'vuex'

import FunctionCfg from '@/views/chart/components/senior/FunctionCfg'
import MapMapping from '@/views/chart/components/senior/MapMapping'
import AssistLine from '@/views/chart/components/senior/AssistLine'
import Threshold from '@/views/chart/components/senior/Threshold'
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
import ValueFormatterEdit from '@/views/chart/components/valueFormatter/ValueFormatterEdit'
import ChartStyle from '@/views/chart/view/ChartStyle'
import CustomSortEdit from '@/views/chart/components/compare/CustomSortEdit'
import ScrollCfg from '@/views/chart/components/senior/ScrollCfg'
import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
import { equalsAny, includesAny } from '@/utils/StringUtils'
import PositionAdjust from '@/views/chart/view/PositionAdjust'
import MarkMapDataEditor from '@/views/chart/components/map/MarkMapDataEditor'

export default {
  name: 'ChartEdit',
  components: {
    PositionAdjust,
    ScrollCfg,
    CalcChartFieldEdit,
    ChartFieldEdit,
    CustomSortEdit,
    ChartStyle,
    ValueFormatterEdit,
    LabelNormalText,
    Threshold,
    AssistLine,
    FunctionCfg,
    DimensionExtItem,
    ChartComponentS2,
    CompareEdit,
    ChartType,
    ChartComponentG2,
    QuotaExtItem,
    FilterItem,
    FieldEdit,
    TableSelector,
    ResultFilterEditor,
    LabelNormal,
    DimensionFilterEditor,
    TableNormal,
    DatasetChartDetail,
    QuotaFilterEditor,
    ChartComponent,
    QuotaItem,
    DimensionItem,
    ChartDragItem,
    DrillItem,
    DrillPath,
    PluginCom,
    MapMapping,
    MarkMapDataEditor
  },
  props: {
    param: {
      type: Object,
      required: true
    },
    editFrom: {
      type: String,
      required: false,
      default: 'view'
    },
    editStatus: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      positionActiveNames: 'positionAdjust',
      loading: false,
      table: {},
      dimension: [],
      quota: [],
      dimensionData: [],
      quotaData: [],
      view: {
        xaxis: [],
        xaxisExt: [],
        yaxis: [],
        yaxisExt: [],
        extStack: [],
        drillFields: [],
        viewFields: [],
        extBubble: [],
        show: true,
        type: 'bar',
        title: '',
        refreshViewEnable: false,
        refreshUnit: 'minute',
        refreshTime: 5,
        customAttr: {
          color: DEFAULT_COLOR_CASE,
          size: DEFAULT_SIZE,
          label: DEFAULT_LABEL,
          tooltip: DEFAULT_TOOLTIP,
          totalCfg: DEFAULT_TOTAL
        },
        customStyle: {
          text: DEFAULT_TITLE_STYLE,
          legend: DEFAULT_LEGEND_STYLE,
          xAxis: DEFAULT_XAXIS_STYLE,
          yAxis: DEFAULT_YAXIS_STYLE,
          yAxisExt: DEFAULT_YAXIS_EXT_STYLE,
          split: DEFAULT_SPLIT
        },
        senior: {
          functionCfg: DEFAULT_FUNCTION_CFG,
          assistLine: [],
          threshold: DEFAULT_THRESHOLD
        },
        customFilter: [],
        render: 'antv',
        isPlugin: false
      },
      moveId: -1,
      chart: {
        id: 'echart',
        type: null
      },
      dimensionFilterEdit: false,
      dimensionItem: {},
      quotaFilterEdit: false,
      quotaItem: {},
      resultFilterEdit: false,
      chartForFilter: {},
      renameItem: false,
      itemForm: {
        name: ''
      },
      itemFormRules: {
        name: [
          { required: true, message: this.$t('commons.input_content'), trigger: 'change' },
          { max: 50, message: this.$t('commons.char_can_not_more_50'), trigger: 'change' }
        ]
      },
      tabStatus: false,
      data: {},
      httpRequest: {
        status: true,
        msg: ''
      },
      selectTableFlag: false,
      changeTable: {},
      searchField: '',
      editDsField: false,
      changeDsTitle: '',
      filterItem: {},
      places: [],
      attrActiveNames: [],
      mapActiveNames: ['map-mapping'],
      styleActiveNames: [],
      drillClickDimensionList: [],
      drillFilters: [],
      renderOptions: [
        { name: 'AntV', value: 'antv' },
        { name: 'ECharts', value: 'echarts' }
      ],
      drill: false,
      hasEdit: false,
      quotaItemCompare: {},
      showEditQuotaCompare: false,
      preChartId: '',
      pluginRenderOptions: [],
      showValueFormatter: false,
      valueFormatterItem: {},
      showCustomSort: false,
      customSortList: [],
      customSortField: {},
      showEditChartField: false,
      currEditField: {},
      editChartCalcField: false,
      fieldShow: false,
      tabActive: 'data',
      currentAreaCode: '',
      showStackCustomSort: false
    }
  },
  computed: {
    chartConfig() {
      const _this = this
      if (_this.chart && _this.chart.render) {
        const viewConfig = this.allViewRender.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
        if (viewConfig && viewConfig.length) {
          return viewConfig[0]
        } else {
          return null
        }
      } else {
        return null
      }
    },
    chartProperties() {
      return this.chartConfig ? this.chartConfig.properties : null
    },
    chartPropertyInnerAll() {
      return this.chartConfig ? this.chartConfig.propertyInner : null
    },
    chartType() {
      return this.chart ? this.chart.type : null
    },
    panelInfo() {
      return this.$store.state.panel.panelInfo
    },
    ...mapState([
      'curComponent',
      'panelViewEditInfo',
      'allViewRender'

    ])
  },
  watch: {
    'curComponent.auxiliaryMatrix': function(val) {
      if (val && this.tabActive === 'position') {
        this.tabActive = 'data'
      }
    },
    'editStatus': function(val) {
      if (val && this.param.id !== this.preChartId) {
        this.preChartId = this.param.id
        this.chartInit()
      }
    },
    'param': function(val) {
      if (this.param.optType === 'new') {
        //
      } else if (this.param.id !== this.preChartId && this.editStatus) {
        this.preChartId = this.param.id
        this.chartInit()
      }
    },
    searchField(val) {
      this.fieldFilter(val)
    },
    'chartType': function(newVal, oldVal) {
      if ((newVal === 'map' || newVal === 'buddle-map') && newVal !== oldVal) {
        this.initAreas()
      }
      this.$emit('typeChange', newVal)
    },
    'view.type': function(newVal, oldVal) {
      this.view.isPlugin = this.$refs['cu-chart-type'] && this.$refs['cu-chart-type'].currentIsPlugin(newVal)
    }
  },
  created() {
    this.bindPluginEvent()
    this.initFromPanel()
    this.chartInit()
    const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views'))
    if (plugins) {
      this.loadPluginType()
    } else {
      pluginTypes().then(res => {
        const plugins = res.data
        localStorage.setItem('plugin-views', JSON.stringify(plugins))
        this.loadPluginType()
      }).catch(e => {
        localStorage.setItem('plugin-views', null)
        this.loadPluginType()
      })
    }
  },
  mounted() {
  },
  beforeDestroy() {
    bus.$off('show-dimension-edit-filter', this.showDimensionEditFilter)
    bus.$off('show-rename', this.showRename)
    bus.$off('show-quota-edit-filter', this.showQuotaEditFilter)
    bus.$off('show-quota-edit-compare', this.showQuotaEditCompare)
    bus.$off('show-edit-filter', this.showEditFilter)
    bus.$off('show-edit-formatter', this.valueFormatter)
    bus.$off('calc-data', this.calcData)
    bus.$off('plugins-calc-style', this.calcStyle)
    bus.$off('plugin-chart-click', this.chartClick)
    bus.$off('set-dynamic-area-code', this.setDynamicAreaCode)
  },
  activated() {
  },

  methods: {
    includesAny,
    equalsAny,
    setTitle(title, id) {
      if (this.view.id !== id) return
      this.view.customStyle.text = { ...this.view.customStyle.text, title }
      this.view.title = title
      this.view.name = title
      this.calcStyle()
    },
    resetChartData() {
      this.getChart(this.param.id)
    },
    setDynamicAreaCode(code) {
      this.currentAreaCode = code
    },
    loadPluginType() {
      const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []
      const pluginOptions = plugins.filter(plugin => !this.renderOptions.some(option => option.value === plugin.render)).map(plugin => {
        return { name: plugin.render, value: plugin.render }
      })
      const elementUI = { name: 'elementUI', value: 'elementUI' }
      this.pluginRenderOptions = [...this.renderOptions, ...pluginOptions]
      this.pluginRenderOptions.push(elementUI)
    },
    emptyTableData(id) {
      this.table = {}
      this.dimension = []
      this.quota = []
      this.dimensionData = []
      this.quotaData = []
    },
    initFromPanel() {
      this.hasEdit = (this.panelViewEditInfo[this.param.id] || false)
    },
    convertChart(chart) {
      if (equalsAny(chart.type, 'pie', 'pie-rose')) {
        let customAttr = chart.customAttr
        if (typeof chart.customAttr === 'string') {
          customAttr = JSON.parse(customAttr)
        }
        if (customAttr.size.pieInnerRadius > 0) {
          if (chart.type === 'pie') {
            chart.type = 'pie-donut'
          }
          if (chart.type === 'pie-rose') {
            chart.type = 'pie-donut-rose'
          }
        }
      }
    },
    chartInit() {
      this.fieldShow = false
      this.resetDrill()
      this.initFromPanel()
      this.getChart(this.param.id)
      // if (this.componentViewsData[this.param.id]) {
      //   this.chart = this.componentViewsData[this.param.id]
      // }
    },
    bindPluginEvent() {
      bus.$on('show-dimension-edit-filter', this.showDimensionEditFilter)
      bus.$on('show-rename', this.showRename)
      bus.$on('show-quota-edit-filter', this.showQuotaEditFilter)
      bus.$on('show-quota-edit-compare', this.showQuotaEditCompare)
      bus.$on('show-edit-filter', this.showEditFilter)
      bus.$on('show-edit-formatter', this.valueFormatter)
      bus.$on('calc-data', this.calcData)
      bus.$on('plugins-calc-style', this.calcStyle)
      bus.$on('plugin-chart-click', this.chartClick)
      bus.$on('set-dynamic-area-code', this.setDynamicAreaCode)
    },
    initTableData(id, optType) {
      if (id != null) {
        tableField(id).then(response => {
          // If click too fast on the panel, the data here may be inconsistent, so make a verification
          if (this.view.tableId === id) {
            this.table = response.data
            this.initTableField(id, optType)
          }
        }).catch(err => {
          this.table = null
          this.resetDatasetField()
          this.httpRequest.status = err.response.data.success
          this.httpRequest.msg = err.response.data.message
          return true
        })
      }
    },
    initTableField(id, optType) {
      if (this.table) {
        post('/dataset/table/getFieldsFromDE', this.table).then(response => {
          // If click too fast on the panel, the data here may be inconsistent, so make a verification
          post('/chart/field/listByDQ/' + this.param.id + '/' + this.panelInfo.id, null).then(res => {
            if (this.view.tableId === id) {
              this.dimension = response.data.dimension.concat(res.data.dimensionList)
              this.quota = response.data.quota.concat(res.data.quotaList)
              this.dimensionData = JSON.parse(JSON.stringify(this.dimension))
              this.quotaData = JSON.parse(JSON.stringify(this.quota))
              this.fieldFilter(this.searchField)
              if (optType === 'change') {
                this.resetChangeTable()
                this.$nextTick(() => {
                  bus.$emit('reset-change-table', 'change')
                  this.calcData()
                })
              }
            }
            this.fieldShow = true
          }).catch(err => {
            console.error(err)
            this.resetView()
            this.httpRequest.status = err.response.data.success
            this.httpRequest.msg = err.response.data.message
            return true
          })
        }).catch(err => {
          console.error(err)

          this.resetView()
          this.httpRequest.status = err.response.data.success
          this.httpRequest.msg = err.response.data.message
          return true
        })
      } else {
        this.resetDatasetField()
      }
    },
    resetChangeTable() {
      const compareData = {}
      this.dimensionData.forEach(deimension => {
        compareData[deimension.originName] = deimension
      })
      this.quotaData.forEach(quota => {
        compareData[quota.originName] = quota
      })
      const compareCols = ['xaxis', 'xaxisExt', 'yaxis', 'yaxisExt', 'customFilter', 'extStack', 'extBubble', 'drillFields']
      this.viewFieldChange(compareData, compareCols)
    },
    viewFieldChange(compareData, compareCols) {
      const _this = this
      compareCols.forEach(compareCol => {
        _this.view[compareCol].forEach(function(item, index) {
          if (compareData[item.originName]) {
            const itemTemp = {
              ...compareData[item.originName],
              name: item.name,
              deType: item.deType,
              type: item.type,
              groupType: item.groupType,
              sort: item.sort
            }
            _this.view[compareCol][index] = itemTemp
          }
        })
      })
    },
    buildParam(getData, trigger, needRefreshGroup = false, switchType = false, switchRender = false) {
      if (!this.view.resultCount ||
        this.view.resultCount === '' ||
        isNaN(Number(this.view.resultCount)) ||
        String(this.view.resultCount).includes('.') ||
        parseInt(this.view.resultCount) < 1) {
        this.view.resultCount = '1000'
      }
      if (switchType) {
        this.view.senior.threshold = {}
      }
      if (switchType && (this.view.type === 'table-info' || this.chart.type === 'table-info') && this.view.xaxis.length > 0) {
        this.$message({
          showClose: true,
          message: this.$t('chart.table_info_switch'),
          type: 'warning'
        })
        this.view.xaxis = []
      }
      const view = JSON.parse(JSON.stringify(this.view))
      view.id = this.view.id
      view.sceneId = this.view.sceneId
      view.name = this.view.title ? this.view.title : this.table.name
      if (view.title.length > 50) {
        this.$error(this.$t('chart.title_limit'))
        return
      }
      view.tableId = this.view.tableId
      if (view.type === 'map' && view.xaxis.length > 1) {
        view.xaxis = [view.xaxis[0]]
      }
      view.xaxis.forEach(function(ele) {
        // if (!ele.summary || ele.summary === '') {
        //   ele.summary = 'sum'
        // }
        if (!ele.dateStyle || ele.dateStyle === '') {
          ele.dateStyle = 'y_M_d'
        }
        if (!ele.datePattern || ele.datePattern === '') {
          ele.datePattern = 'date_sub'
        }
        if (!ele.sort || ele.sort === '') {
          ele.sort = 'none'
        }
        if (!ele.filter) {
          ele.filter = []
        }
      })
      if (equalsAny(view.type, 'table-pivot', 'bar-group', 'bar-group-stack', 'flow-map') ||
        (view.render === 'antv' && view.type === 'line')) {
        view.xaxisExt.forEach(function(ele) {
          if (!ele.dateStyle || ele.dateStyle === '') {
            ele.dateStyle = 'y_M_d'
          }
          if (!ele.datePattern || ele.datePattern === '') {
            ele.datePattern = 'date_sub'
          }
          if (!ele.sort || ele.sort === '') {
            ele.sort = 'none'
          }
          if (!ele.filter) {
            ele.filter = []
          }
        })
      }

      view.yaxis.forEach(function(ele) {
        if (!ele.chartType) {
          ele.chartType = 'bar'
        }
        if (ele.chartId) {
          ele.summary = ''
        } else {
          if (!ele.summary || ele.summary === '') {
            if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
              ele.summary = 'count'
            } else {
              ele.summary = 'sum'
            }
          }
        }

        if (!ele.sort || ele.sort === '') {
          ele.sort = 'none'
        }
        if (!ele.filter) {
          ele.filter = []
        }
        if (!ele.compareCalc) {
          ele.compareCalc = compareItem
        }
      })
      if (view.type === 'chart-mix') {
        view.yaxisExt.forEach(function(ele) {
          if (!ele.chartType) {
            ele.chartType = 'bar'
          }
          if (ele.chartId) {
            ele.summary = ''
          } else {
            if (!ele.summary || ele.summary === '') {
              if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
                ele.summary = 'count'
              } else {
                ele.summary = 'sum'
              }
            }
          }

          if (!ele.sort || ele.sort === '') {
            ele.sort = 'none'
          }
          if (!ele.filter) {
            ele.filter = []
          }
          if (!ele.compareCalc) {
            ele.compareCalc = compareItem
          }
        })
      }
      view.extStack.forEach(function(ele) {
        if (!ele.dateStyle || ele.dateStyle === '') {
          ele.dateStyle = 'y_M_d'
        }
        if (!ele.datePattern || ele.datePattern === '') {
          ele.datePattern = 'date_sub'
        }
        if (!ele.sort || ele.sort === '') {
          ele.sort = 'none'
        }
      })
      view.extBubble.forEach(function(ele) {
        if (!ele.summary || ele.summary === '') {
          if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
            ele.summary = 'count'
          } else {
            ele.summary = 'sum'
          }
        }
      })
      if (view.type === 'label') {
        if (view.xaxis.length > 1) {
          view.xaxis.splice(1, view.xaxis.length)
        }
      }
      if (view.type.startsWith('pie') ||
        view.type.startsWith('funnel') ||
        view.type.startsWith('text') ||
        view.type.startsWith('gauge') ||
        view.type === 'treemap' ||
        view.type === 'liquid' ||
        view.type === 'word-cloud' ||
        view.type === 'waterfall' ||
        view.type.includes('group')) {
        if (view.yaxis.length > 1) {
          view.yaxis.splice(1, view.yaxis.length)
        }
      }
      if (view.type === 'line-stack' && trigger === 'chart') {
        view.customAttr.size.lineArea = true
      }
      if (view.type === 'line' && trigger === 'chart') {
        view.customAttr.size.lineArea = false
      }
      if (view.type === 'liquid' ||
        (view.type.includes('table') && view.render === 'echarts') ||
        view.type.includes('text') ||
        view.type.includes('gauge') ||
        view.type === 'table-pivot') {
        view.drillFields = []
      }
      view.customFilter.forEach(function(ele) {
        if (ele && !ele.filter) {
          ele.filter = []
        }
      })
      this.chart = JSON.parse(JSON.stringify(view))
      this.view = JSON.parse(JSON.stringify(view))
      // stringify json param
      view.xaxis = JSON.stringify(view.xaxis)
      view.viewFields = JSON.stringify(view.viewFields)
      view.xaxisExt = JSON.stringify(view.xaxisExt)
      view.yaxis = JSON.stringify(view.yaxis)
      view.yaxisExt = JSON.stringify(view.yaxisExt)
      view.customAttr = JSON.stringify(view.customAttr)
      view.customStyle = JSON.stringify(view.customStyle)
      view.customFilter = JSON.stringify(view.customFilter)
      view.extStack = JSON.stringify(view.extStack)
      view.drillFields = JSON.stringify(view.drillFields)
      view.extBubble = JSON.stringify(view.extBubble)
      view.senior = JSON.stringify(view.senior)
      delete view.data
      return view
    },
    refreshAttrChange() {
      if (this.view.refreshTime > 3600) {
        this.view.refreshTime = 3600
      } else if (this.view.refreshTime < 1) {
        this.view.refreshTime = 1
      }
      this.changeEditStatus(true)
      const view = this.buildParam(true, 'chart', false)
      if (!view) return
      viewEditSave(this.panelInfo.id, view)
    },
    calcData(getData, trigger, needRefreshGroup = false, switchType = false, switchRender = false) {
      this.changeEditStatus(true)
      const view = this.buildParam(true, 'chart', false, switchType, switchRender)
      if (!view) return
      viewEditSave(this.panelInfo.id, view).then(() => {
        // this.getData(this.param.id)
        this.getChart(this.param.id)
        bus.$emit('view-in-cache', {
          type: 'propChange',
          viewId: this.param.id,
          view: view
        })
      })
    },
    calcStyle(modifyName) {
      this.changeEditStatus(true)
      // 将视图传入echart...组件
      const view = JSON.parse(JSON.stringify(this.view))
      view.xaxis = JSON.stringify(this.view.xaxis)
      view.viewFields = JSON.stringify(this.view.viewFields)
      view.xaxisExt = JSON.stringify(this.view.xaxisExt)
      view.yaxis = JSON.stringify(this.view.yaxis)
      view.yaxisExt = JSON.stringify(this.view.yaxisExt)
      view.extStack = JSON.stringify(this.view.extStack)
      view.drillFields = JSON.stringify(this.view.drillFields)
      view.extBubble = JSON.stringify(this.view.extBubble)
      view.customAttr = JSON.stringify(this.view.customAttr)
      view.customStyle = JSON.stringify(this.view.customStyle)
      view.customFilter = JSON.stringify(this.view.customFilter)
      view.senior = JSON.stringify(this.view.senior)
      view.title = this.view.title
      view.stylePriority = this.view.stylePriority
      // view.data = this.data
      this.chart = view

      // 保存到缓存表
      const viewSave = this.buildParam(true, 'chart', false, false)
      if (!viewSave) return
      viewEditSave(this.panelInfo.id, viewSave)

      if (modifyName === 'color') {
        bus.$emit('view-in-cache', {
          type: 'styleChange',
          viewId: this.view.id,
          viewInfo: view,
          refreshProp: 'customAttr'
        })
      } else {
        bus.$emit('view-in-cache', { type: 'styleChange', viewId: this.view.id, viewInfo: view })
      }
    },

    closeEdit() {
      if (this.view.title && this.view.title.length > 50) {
        this.$warning(this.$t('chart.title_limit'))
        return
      }
      const view = this.buildParam(true, 'chart', false, false)
      if (!view) return
      post('/chart/view/save/' + this.panelInfo.id, view).then(response => {
        this.getChart(response.data.id)
        this.hasEdit = false
        this.refreshGroup(view)
        this.closeChangeChart()
        // 从仪表板入口关闭
        if (this.$route.path.indexOf('panel') > -1) {
          this.$store.commit('recordSnapshot')
          bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
        }
        this.$success(this.$t('commons.save_success'))
      })
    },
    closePanelEdit() {
      bus.$emit('change_panel_right_draw', false)
    },
    close() {
      this.closeChangeChart()
      // 从仪表板入口关闭
      if (this.$route.path.indexOf('panel') > -1) {
        this.$store.commit('recordSnapshot')
        bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
      }
    },
    getData(id) {
      // this.hasEdit = true
      if (id) {
        ajaxGetDataOnly(id, this.panelInfo.id, {
          filter: [],
          drill: this.drillClickDimensionList,
          queryFrom: 'panel'
        }).then(response => {
          this.initTableData(response.data.tableId)
          this.view = JSON.parse(JSON.stringify(response.data))
          this.view.viewFields = this.view.viewFields ? JSON.parse(this.view.viewFields) : []
          this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
          this.view.xaxisExt = this.view.xaxisExt ? JSON.parse(this.view.xaxisExt) : []
          this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
          this.view.yaxisExt = this.view.yaxisExt ? JSON.parse(this.view.yaxisExt) : []
          this.view.extStack = this.view.extStack ? JSON.parse(this.view.extStack) : []
          this.view.drillFields = this.view.drillFields ? JSON.parse(this.view.drillFields) : []
          this.view.extBubble = this.view.extBubble ? JSON.parse(this.view.extBubble) : []
          this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
          this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {}
          this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
          this.view.senior = this.view.senior ? JSON.parse(this.view.senior) : {}
          // 将视图传入echart组件
          this.chart = response.data
          this.data = response.data.data
          this.httpRequest.status = true
          if (this.chart.privileges) {
            this.param.privileges = this.chart.privileges
          }
          if (!response.data.drill) {
            this.drillClickDimensionList.splice(this.drillClickDimensionList.length - 1, 1)

            this.resetDrill()
          }
          this.drill = response.data.drill
          this.drillFilters = JSON.parse(JSON.stringify(response.data.drillFilters ? response.data.drillFilters : []))
        }).catch(err => {
          this.resetView()
          this.resetDrill()
          this.$nextTick(() => {
            this.getChart(id)
          })
          this.httpRequest.status = err.response.data.success
          this.httpRequest.msg = err.response.data.message
          return true
        })
      } else {
        this.view = {}
      }
    },
    getChart(id, queryFrom = 'panel_edit') {
      if (id) {
        getChartDetails(id, this.panelInfo.id, { queryFrom: queryFrom }).then(response => {
          // If click too fast on the panel, the data here may be inconsistent, so make a verification
          if (response.data.id === this.param.id) {
            if (response.data.dataFrom === 'template') {
              this.emptyTableData(response.data.id)
            } else {
              this.initTableData(response.data.tableId)
            }
            this.view = JSON.parse(JSON.stringify(response.data))
            this.view.viewFields = this.view.viewFields ? JSON.parse(this.view.viewFields) : []
            this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
            this.view.xaxisExt = this.view.xaxisExt ? JSON.parse(this.view.xaxisExt) : []
            this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
            this.view.yaxisExt = this.view.yaxisExt ? JSON.parse(this.view.yaxisExt) : []
            this.view.extStack = this.view.extStack ? JSON.parse(this.view.extStack) : []
            this.view.drillFields = this.view.drillFields ? JSON.parse(this.view.drillFields) : []
            this.view.extBubble = this.view.extBubble ? JSON.parse(this.view.extBubble) : []
            this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
            this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {}
            this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
            this.view.senior = this.view.senior ? JSON.parse(this.view.senior) : {}

            // 将视图传入echart组件
            this.chart = response.data
            this.data = response.data.data
          }
        }).catch(err => {
          this.httpRequest.status = err.response.data.success
          this.httpRequest.msg = err.response.data.message
          return true
        }).then(() => {
          // 视图为编辑状态才进行转换
          if (this.editStatus) {
            this.convertChart(this.chart)
            this.convertChart(this.view)
          }
        })
      } else {
        this.view = {}
      }
    },

    // move回调方法
    onMove(e, originalEvent) {
      this.moveId = e.draggedContext.element.id
      return true
    },

    onCustomSort(item) {
      this.customSortField = this.view.xaxis[item.index]
      this.customSort()
    },

    dimensionItemChange(item) {
      this.calcData(true)
    },

    dimensionItemRemove(item) {
      if (item.removeType === 'dimension') {
        this.view.xaxis.splice(item.index, 1)
      } else if (item.removeType === 'dimensionExt') {
        this.view.xaxisExt.splice(item.index, 1)
      }
      this.calcData(true)
    },

    quotaItemChange(item) {
      this.calcData(true)
    },

    quotaItemRemove(item) {
      if (item.removeType === 'quota') {
        this.view.yaxis.splice(item.index, 1)
      } else if (item.removeType === 'quotaExt') {
        this.view.yaxisExt.splice(item.index, 1)
      }
      this.calcData(true)
    },

    onColorChange(val) {
      this.view.customAttr.color = val
      this.calcStyle('color')
    },
    onSuspensionChange(val) {
      this.view.customAttr.suspension = val
      this.calcStyle()
    },
    onMarkChange(val) {
      this.view.customAttr.mark = val
      if (val.modifyName === 'fieldId') {
        this.calcData()
      } else {
        this.calcStyle()
      }
    },
    onSizeChange(val) {
      this.view.customAttr.size = val
      this.calcData()
    },
    onFieldChange(val) {
      this.view.customAttr.field = val
      this.calcData()
    },
    onTextChange(val) {
      this.view.customStyle.text = val
      this.view.title = val.title
      this.calcStyle()
    },

    onLegendChange(val) {
      this.view.customStyle.legend = val
      this.calcStyle()
    },
    onMarginChange(val) {
      this.view.customStyle.margin = val
      this.calcStyle()
    },

    onLabelChange(val) {
      this.view.customAttr.label = val
      this.calcStyle()
    },

    onTooltipChange(val) {
      this.view.customAttr.tooltip = val
      this.calcStyle()
    },

    onTotalCfgChange(val) {
      this.view.customAttr.totalCfg = val
      this.calcStyle()
    },

    onChangeXAxisForm(val) {
      this.view.customStyle.xAxis = val
      this.calcStyle()
    },

    onChangeYAxisForm(val) {
      this.view.customStyle.yAxis = val
      this.calcStyle()
    },

    onChangeYAxisExtForm(val) {
      this.view.customStyle.yAxisExt = val
      this.calcStyle()
    },

    onChangeBackgroundForm(val) {
      this.view.customStyle.background = val
      this.calcStyle()
    },

    onChangeSplitForm(val) {
      this.view.customStyle.split = val
      this.calcStyle()
    },

    onFunctionCfgChange(val) {
      this.view.senior.functionCfg = val
      this.calcStyle()
    },

    onAssistLineChange(val) {
      this.view.senior.assistLine = val
      this.calcData()
    },

    onThresholdChange(val) {
      this.view.senior.threshold = val
      this.calcStyle()
    },

    onScrollChange(val) {
      this.view.senior.scrollCfg = val
      this.calcStyle()
    },
    onMapMappingChange(val) {
      this.view.senior.mapMapping = val
      this.calcStyle()
    },
    onMapChange(val) {
      this.view.customAttr.map = val
      this.calcStyle()
    },
    showDimensionEditFilter(item) {
      this.dimensionItem = JSON.parse(JSON.stringify(item))
      this.dimensionFilterEdit = true
    },
    closeDimensionFilter() {
      this.dimensionFilterEdit = false
    },
    saveDimensionFilter() {
      for (let i = 0; i < this.dimensionItem.filter.length; i++) {
        const f = this.dimensionItem.filter[i]
        if (!f.term.includes('null') && !f.term.includes('empty') && (!f.value || f.value === '')) {
          this.$message({
            message: this.$t('chart.filter_value_can_null'),
            type: 'error',
            showClose: true
          })
          return
        }
      }
      this.view.xaxis[this.dimensionItem.index].filter = this.dimensionItem.filter
      this.calcData(true)
      this.closeDimensionFilter()
    },

    showQuotaEditFilter(item) {
      this.quotaItem = JSON.parse(JSON.stringify(item))
      if (!this.quotaItem.logic) {
        this.quotaItem.logic = 'and'
      }
      this.quotaFilterEdit = true
    },
    closeQuotaFilter() {
      this.quotaFilterEdit = false
    },
    saveQuotaFilter() {
      for (let i = 0; i < this.quotaItem.filter.length; i++) {
        const f = this.quotaItem.filter[i]
        if (!f.term.includes('null') && !f.term.includes('empty') && (!f.value || f.value === '')) {
          this.$message({
            message: this.$t('chart.filter_value_can_null'),
            type: 'error',
            showClose: true
          })
          return
        }
        if (isNaN(f.value)) {
          this.$message({
            message: this.$t('chart.filter_value_can_not_str'),
            type: 'error',
            showClose: true
          })
          return
        }
      }
      if (this.quotaItem.filterType === 'quota') {
        this.view.yaxis[this.quotaItem.index].filter = this.quotaItem.filter
        this.view.yaxis[this.quotaItem.index].logic = this.quotaItem.logic
      } else if (this.quotaItem.filterType === 'quotaExt') {
        this.view.yaxisExt[this.quotaItem.index].filter = this.quotaItem.filter
        this.view.yaxisExt[this.quotaItem.index].logic = this.quotaItem.logic
      }
      this.calcData(true)
      this.closeQuotaFilter()
    },

    filterItemRemove(item) {
      this.view.customFilter.splice(item.index, 1)
      this.calcData(true)
    },
    showEditFilter(item) {
      this.filterItem = JSON.parse(JSON.stringify(item))
      this.chartForFilter = JSON.parse(JSON.stringify(this.view))
      if (!this.filterItem.logic) {
        this.filterItem.logic = 'and'
      }
      if (!this.filterItem.filterType) {
        this.filterItem.filterType = 'logic'
      }
      if (!this.filterItem.enumCheckField) {
        this.filterItem.enumCheckField = []
      }
      this.resultFilterEdit = true
    },
    closeResultFilter() {
      this.resultFilterEdit = false
    },
    saveResultFilter() {
      if (((this.filterItem.deType === 0 || this.filterItem.deType === 5) && this.filterItem.filterType !== 'enum') ||
        this.filterItem.deType === 1 ||
        this.filterItem.deType === 2 ||
        this.filterItem.deType === 3) {
        for (let i = 0; i < this.filterItem.filter.length; i++) {
          const f = this.filterItem.filter[i]
          if (!f.term.includes('null') && !f.term.includes('empty') && (!f.value || f.value === '')) {
            this.$message({
              message: this.$t('chart.filter_value_can_null'),
              type: 'error',
              showClose: true
            })
            return
          }
          if (this.filterItem.deType === 2 || this.filterItem.deType === 3) {
            if (isNaN(f.value)) {
              this.$message({
                message: this.$t('chart.filter_value_can_not_str'),
                type: 'error',
                showClose: true
              })
              return
            }
          }
        }
      }

      this.view.customFilter[this.filterItem.index].filter = this.filterItem.filter
      this.view.customFilter[this.filterItem.index].logic = this.filterItem.logic
      this.view.customFilter[this.filterItem.index].filterType = this.filterItem.filterType
      this.view.customFilter[this.filterItem.index].enumCheckField = this.filterItem.enumCheckField
      this.calcData(true)
      this.closeResultFilter()
    },

    showRename(val) {
      this.itemForm = JSON.parse(JSON.stringify(val))
      this.renameItem = true
    },
    saveRename() {
      this.$refs['itemForm'].validate((valid) => {
        if (valid) {
          if (this.itemForm.renameType === 'quota') {
            this.view.yaxis[this.itemForm.index].name = this.itemForm.name
          } else if (this.itemForm.renameType === 'dimension') {
            this.view.xaxis[this.itemForm.index].name = this.itemForm.name
          } else if (this.itemForm.renameType === 'quotaExt') {
            this.view.yaxisExt[this.itemForm.index].name = this.itemForm.name
          } else if (this.itemForm.renameType === 'dimensionExt') {
            this.view.xaxisExt[this.itemForm.index].name = this.itemForm.name
          }
          this.calcData(true)
          this.closeRename()
        } else {
          return false
        }
      })
    },
    closeRename() {
      this.renameItem = false
      this.resetRename()
    },
    resetRename() {
      // this.itemForm = {}
    },

    showQuotaEditCompare(item) {
      this.quotaItemCompare = JSON.parse(JSON.stringify(item))
      this.showEditQuotaCompare = true
    },
    closeQuotaEditCompare() {
      this.showEditQuotaCompare = false
    },
    saveQuotaEditCompare() {
      // 更新指标
      if (this.quotaItemCompare.calcType === 'quota') {
        this.view.yaxis[this.quotaItemCompare.index].compareCalc = this.quotaItemCompare.compareCalc
      } else if (this.quotaItemCompare.calcType === 'quotaExt') {
        this.view.yaxisExt[this.quotaItemCompare.index].compareCalc = this.quotaItemCompare.compareCalc
      }
      this.calcData(true)
      this.closeQuotaEditCompare()
    },

    showTab() {
      this.tabStatus = true
    },
    hideTab() {
      this.tabStatus = false
    },
    resetDatasetField() {
      this.dimension = []
      this.dimensionData = []
      this.quota = []
      this.quotaData = []
    },
    resetView() {
      this.resetDatasetField()
      this.view = {
        xAxis: [],
        yAxis: [],
        type: ''
      }
    },

    refreshGroup(view) {
      this.$emit('saveSuccess', view)
    },

    getTable(table) {
      this.changeTable = JSON.parse(JSON.stringify(table))
    },

    changeDs() {
      const dialogTitle = (this.table && this.table.name) ? ('[' + this.table.name + ']') : ''
      this.changeDsTitle = this.$t('chart.change_ds') + dialogTitle
      this.selectTableFlag = true
    },

    closeChangeChart() {
      this.selectTableFlag = false
    },

    // 更换数据集
    changeChart() {
      const optType = this.view.tableId === this.changeTable.id ? 'same' : 'change'
      // 更换数据集后清空视图字段，并重新请求数据；否则没有操作
      if (optType === 'change') {
        this.view.dataFrom = 'dataset'
        this.view.tableId = this.changeTable.id
        post('/chart/field/deleteByChartId/' + this.param.id + '/' + this.panelInfo.id, null).then(response => {
          // reset gauge
          this.view.customAttr.size.gaugeMinType = 'fix'
          this.view.customAttr.size.gaugeMaxType = 'fix'
          this.calcData(true, 'chart', false)
          this.initTableData(this.view.tableId, optType)
          this.closeChangeChart()
        })
      } else {
        this.closeChangeChart()
      }
    },

    fieldFilter(val) {
      if (val && val !== '') {
        this.dimensionData = JSON.parse(JSON.stringify(this.dimension.filter(ele => {
          return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase())
        })))
        this.quotaData = JSON.parse(JSON.stringify(this.quota.filter(ele => {
          return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase())
        })))
      } else {
        this.dimensionData = JSON.parse(JSON.stringify(this.dimension))
        this.quotaData = JSON.parse(JSON.stringify(this.quota))
      }
    },

    editField() {
      this.editDsField = true
    },

    closeEditDsField() {
      this.editDsField = false
      this.initTableField(this.table.id)
      // 因动态计算较多，更新字段后重新计算视图数据
      this.calcData()
    },

    editChartField() {
      this.showEditChartField = true
    },

    closeEditChartField() {
      this.showEditChartField = false
      this.initTableField(this.table.id)
      // 因动态计算较多，更新字段后重新计算视图数据
      this.calcData()
    },

    // drag
    dragCheckType(list, type) {
      if (list && list.length > 0) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].groupType !== type) {
            list.splice(i, 1)
          }
        }
      }
    },
    dragMoveDuplicate(list, e, mode) {
      console.log('this.view.xaxis', this.view.xaxis)
      console.log('this.view.xaxisExt', this.view.xaxisExt)
      if (mode === 'ds') {
        list.splice(e.newDraggableIndex, 1)
      } else {
        const that = this
        const dup = list.filter(function(m) {
          return m.id === that.moveId
        })
        if (dup && dup.length > 1) {
          list.splice(e.newDraggableIndex, 1)
        }
      }
    },
    dragRemoveChartField(list, e) {
      const that = this
      const dup = list.filter(function(m) {
        return m.id === that.moveId
      })
      if (dup && dup.length > 0) {
        if (dup[0].chartId) {
          list.splice(e.newDraggableIndex, 1)
        }
      }
    },
    addXaxis(e) {
      if (this.view.type !== 'table-info' && this.view.type !== 'table-element') {
        this.dragCheckType(this.view.xaxis, 'd')
      }
      this.dragMoveDuplicate(this.view.xaxis, e)
      if ((this.view.type === 'map' || this.view.type === 'word-cloud' || this.view.type === 'label') && this.view.xaxis.length > 1) {
        this.view.xaxis = [this.view.xaxis[0]]
      }
      this.calcData(true)
    },
    addXaxisExt(e) {
      if (this.view.type !== 'table-info' && this.view.type !== 'table-element') {
        this.dragCheckType(this.view.xaxisExt, 'd')
      }
      this.dragMoveDuplicate(this.view.xaxisExt, e)
      if ((this.view.type === 'map' || this.view.type === 'word-cloud') && this.view.xaxisExt.length > 1) {
        this.view.xaxisExt = [this.view.xaxisExt[0]]
      }
      this.calcData(true)
    },
    addYaxis(e) {
      this.dragCheckType(this.view.yaxis, 'q')
      this.dragMoveDuplicate(this.view.yaxis, e)
      if ((this.view.type === 'waterfall' || this.view.type === 'word-cloud' || this.view.type.includes('group')) && this.view.yaxis.length > 1) {
        this.view.yaxis = [this.view.yaxis[0]]
      }
      this.calcData(true)
    },
    addYaxisExt(e) {
      this.dragCheckType(this.view.yaxisExt, 'q')
      this.dragMoveDuplicate(this.view.yaxisExt, e)
      if (this.view.type === 'map' && this.view.yaxisExt.length > 1) {
        this.view.yaxisExt = [this.view.yaxisExt[0]]
      }
      this.calcData(true)
    },
    moveToDimension(e) {
      this.dragMoveDuplicate(this.dimensionData, e, 'ds')
      this.calcData(true)
    },
    moveToQuota(e) {
      this.dragMoveDuplicate(this.quotaData, e, 'ds')
      this.calcData(true)
    },
    addCustomFilter(e) {
      // 记录数等自动生成字段不做为过滤条件
      if (this.view.customFilter && this.view.customFilter.length > 0) {
        for (let i = 0; i < this.view.customFilter.length; i++) {
          if (this.view.customFilter[i].id === 'count') {
            this.view.customFilter.splice(i, 1)
          }
        }
      }
      this.view.customFilter[e.newDraggableIndex].filter = []
      this.dragMoveDuplicate(this.view.customFilter, e)
      this.dragRemoveChartField(this.view.customFilter, e)
      this.calcData(true)
    },

    initAreas() {
      //   let mapping
      //   if ((mapping = localStorage.getItem('areaMapping')) !== null) {
      //     this.places = JSON.parse(mapping)
      //     return
      //   }
      Object.keys(this.places).length === 0 && areaMapping().then(res => {
        this.places = res.data
        // localStorage.setItem('areaMapping', JSON.stringify(res.data))
      })
    },

    normalizer(node) {
      const resultNode = {
        id: node.code,
        label: node.name
      }
      if (node.children && node.children.length > 0) {
        resultNode.children = node.children
      }

      if (resultNode.children && (!node.children || node.children.length === 0)) {
        delete resultNode.children
      }
      return resultNode
    },
    addStack(e) {
      this.dragCheckType(this.view.extStack, 'd')
      if (this.view.extStack && this.view.extStack.length > 1) {
        this.view.extStack = [this.view.extStack[0]]
      }
      this.calcData(true)
    },
    stackItemChange(item) {
      this.calcData(true)
    },
    stackItemRemove(item) {
      this.view.extStack.splice(item.index, 1)
      this.calcData(true)
    },
    stackItemCustomSort(item) {
      this.customSortField = this.view.extStack[item.index]
      this.stackCustomSort()
    },

    drillItemChange(item) {
      this.calcData(true)
    },
    drillItemRemove(item) {
      this.view.drillFields.splice(item.index, 1)
      this.calcData(true)
    },
    addDrill(e) {
      this.dragCheckType(this.view.drillFields, 'd')
      this.dragMoveDuplicate(this.view.drillFields, e)
      this.dragRemoveChartField(this.view.drillFields, e)
      this.calcData(true)
    },

    addBubble(e) {
      this.dragCheckType(this.view.extBubble, 'q')
      if (this.view.extBubble && this.view.extBubble.length > 1) {
        this.view.extBubble = [this.view.extBubble[0]]
      }
      this.calcData(true)
    },
    bubbleItemChange(item) {
      this.calcData(true)
    },
    bubbleItemRemove(item) {
      this.view.extBubble.splice(item.index, 1)
      this.calcData(true)
    },

    chartClick(param) {
      if (this.drillClickDimensionList.length < this.view.drillFields.length - 1) {
        // const isSwitch = (this.chart.type === 'map' && this.sendToChildren(param))
        if (this.chart.type === 'map' || this.chart.type === 'buddle-map') {
          if (this.sendToChildren(param)) {
            this.drillClickDimensionList.push({ dimensionList: param.data.dimensionList })
            // this.getData(this.param.id)
            this.calcData(true, 'chart', false, false)
          }
        } else {
          this.drillClickDimensionList.push({ dimensionList: param.data.dimensionList })
          // this.getData(this.param.id)
          this.calcData(true, 'chart', false, false)
        }
      } else if (this.view.drillFields.length > 0) {
        this.$message({
          type: 'error',
          message: this.$t('chart.last_layer'),
          showClose: true
        })
      }
    },

    resetDrill() {
      const length = this.drillClickDimensionList.length
      this.drillClickDimensionList = []
      if (this.chart.type === 'map' || this.chart.type === 'buddle-map') {
        this.backToParent(0, length)
        this.currentAcreaNode = null
        const current = this.$refs.dynamicChart
        this.setDetailMapCode(null)
        if (this.view.isPlugin) {
          current && current.callPluginInner && current.callPluginInner({
            methodName: 'registerDynamicMap',
            methodParam: null
          })
        } else {
          current && current.registerDynamicMap && current.registerDynamicMap(null)
        }
        // this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(null)
      }
    },
    drillJump(index) {
      const length = this.drillClickDimensionList.length
      this.drillClickDimensionList = this.drillClickDimensionList.slice(0, index)
      if (this.chart.type === 'map' || this.chart.type === 'buddle-map') {
        this.backToParent(index, length)
      }

      // this.getData(this.param.id)
      this.calcData(true, 'chart', false, false)
    },
    // 回到父级地图
    backToParent(index, length) {
      if (length <= 0) return
      const times = length - 1 - index

      let temp = times
      let tempNode = this.currentAcreaNode
      while (temp >= 0) {
        tempNode = this.findEntityByCode(tempNode.pcode, this.places)
        temp--
      }

      this.currentAcreaNode = tempNode
      // this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(this.currentAcreaNode.code)
      const current = this.$refs.dynamicChart
      if (this.view.isPlugin) {
        current && current.callPluginInner && this.setDetailMapCode(this.currentAcreaNode.code) && current.callPluginInner({
          methodName: 'registerDynamicMap',
          methodParam: this.currentAcreaNode.code
        })
      } else {
        current && current.registerDynamicMap && this.setDetailMapCode(this.currentAcreaNode.code) && current.registerDynamicMap(this.currentAcreaNode.code)
      }
    },

    setDetailMapCode(code) {
      this.currentAreaCode = code
      this.curComponent.DetailAreaCode = code
      return true
    },

    // 切换下一级地图
    sendToChildren(param) {
      const length = param.data.dimensionList.length
      const name = param.data.dimensionList[length - 1].value
      let aCode = null
      if (this.currentAcreaNode) {
        aCode = this.currentAcreaNode.code
      }
      //   const aCode = this.currentAcreaNode ? this.currentAcreaNode.code : null
      const currentNode = this.findEntityByCode(aCode || this.view.customAttr.areaCode, this.places)
      if (currentNode && currentNode.children && currentNode.children.length > 0) {
        const nextNode = currentNode.children.find(item => item.name === name)
        if (!nextNode || !nextNode.code) return null
        // this.view.customAttr.areaCode = nextNode.code
        this.currentAcreaNode = nextNode
        // this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(nextNode.code)
        const current = this.$refs.dynamicChart
        if (this.view.isPlugin) {
          nextNode && current && current.callPluginInner && this.setDetailMapCode(nextNode.code) && current.callPluginInner({
            methodName: 'registerDynamicMap',
            methodParam: nextNode.code
          })
        } else {
          nextNode && current && current.registerDynamicMap && this.setDetailMapCode(nextNode.code) && current.registerDynamicMap(nextNode.code)
        }
        return nextNode
      }
    },

    findEntityByCode(code, array) {
      if (array === null || array.length === 0) array = this.places
      for (let index = 0; index < array.length; index++) {
        const node = array[index]
        if (node.code === code) return node
        if (node.children && node.children.length > 0) {
          const temp = this.findEntityByCode(code, node.children)
          if (temp) return temp
        }
      }
    },

    renderComponent() {
      return this.chart.render
    },

    reset() {
      const _this = this
      this.$confirm(this.$t('chart.view_reset_tips'), this.$t('chart.view_reset'), {
        confirmButtonText: this.$t('commons.confirm'),
        cancelButtonText: this.$t('commons.cancel'),
        type: 'warning'
      }).then(() => {
        resetViewCacheCallBack(_this.param.id, _this.panelInfo.id, function(rsp) {
          _this.changeEditStatus(false)
          _this.getChart(_this.param.id, 'panel')
          bus.$emit('view-in-cache', { type: 'propChange', viewId: _this.param.id })
        })
      }).catch(() => {
        // Do Nothing
      })
    },
    changeEditStatus(status) {
      this.hasEdit = status
      this.$store.commit('recordViewEdit', { viewId: this.param.id, hasEdit: status })
    },
    changeChartRender() {
      this.setChartDefaultOptions()
      this.calcData(true, 'chart', true, false, true)
    },
    changeChartType() {
      this.setChartDefaultOptions()
      this.calcData(true, 'chart', true, true)
    },

    setChartDefaultOptions() {
      const type = this.view.type
      const customAttr = this.view.customAttr
      const customStyle = this.view.customStyle
      if (this.view.render === 'echarts') {
        this.view.customAttr.label.position = 'inside'
      } else {
        this.view.customAttr.label.position = 'middle'
      }
      if (type.includes('pie')) {
        if (this.view.render === 'echarts') {
          customAttr.label.position = 'inside'
        } else {
          customStyle.legend.show = false
          customAttr.label.show = true
          customAttr.label.position = 'outer'
        }
        if (type === 'pie-donut') {
          customAttr.size.pieInnerRadius = Math.round(customAttr.size.pieOuterRadius * 0.75)
        }
        if (type === 'pie-donut-rose') {
          customAttr.size.pieInnerRadius = Math.round(customAttr.size.pieOuterRadius * 0.5)
        }
        if (equalsAny(type, 'pie', 'pie-rose')) {
          customAttr.size.pieInnerRadius = 0
        }
      } else if (type.includes('bar')) {
        this.view.customAttr.label.labelContent = ['quota']
        this.view.senior.functionCfg.emptyDataStrategy = 'ignoreData'
      } else if (type.includes('line')) {
        this.view.customAttr.label.position = 'top'
      }
      // reset custom colors
      this.view.customAttr.color.seriesColors = []
    },

    valueFormatter(item) {
      this.valueFormatterItem = JSON.parse(JSON.stringify(item))
      this.showValueFormatter = true
    },
    closeValueFormatter() {
      this.showValueFormatter = false
    },
    saveValueFormatter() {
      const ele = this.valueFormatterItem.formatterCfg.decimalCount
      if (ele === undefined || ele.toString().indexOf('.') > -1 || parseInt(ele).toString() === 'NaN' || parseInt(ele) < 0 || parseInt(ele) > 10) {
        this.$message({
          message: this.$t('chart.formatter_decimal_count_error'),
          type: 'error',
          showClose: true
        })
        return
      }
      // 更新指标
      if (this.valueFormatterItem.formatterType === 'quota') {
        this.view.yaxis[this.valueFormatterItem.index].formatterCfg = this.valueFormatterItem.formatterCfg
      } else if (this.valueFormatterItem.formatterType === 'quotaExt') {
        this.view.yaxisExt[this.valueFormatterItem.index].formatterCfg = this.valueFormatterItem.formatterCfg
      } else if (this.valueFormatterItem.formatterType === 'dimension') {
        this.view.xaxis[this.valueFormatterItem.index].formatterCfg = this.valueFormatterItem.formatterCfg
      }
      this.calcData(true)
      this.closeValueFormatter()
    },

    customSort() {
      this.showCustomSort = true
    },
    customSortChange(val) {
      this.customSortList = val
    },
    closeCustomSort() {
      this.showCustomSort = false
      this.customSortField = {}
      this.customSortList = []
    },
    saveCustomSort() {
      this.view.xaxis.forEach(ele => {
        if (ele.id === this.customSortField.id) {
          ele.sort = 'custom_sort'
          ele.customSort = this.customSortList
        }
      })
      this.closeCustomSort()
      this.calcData(true)
    },

    stackCustomSort() {
      this.showStackCustomSort = true
    },
    closeStackCustomSort() {
      this.showStackCustomSort = false
    },
    saveStackCustomSort() {
      this.view.extStack.forEach(ele => {
        if (ele.id === this.customSortField.id) {
          ele.sort = 'custom_sort'
          ele.customSort = this.customSortList
        }
      })
      this.closeStackCustomSort()
      this.calcData(true)
    },

    fieldEdit(param) {
      switch (param.type) {
        case 'ds':
          this.editField()
          break
        case 'chart':
          this.editChartField()
          break
        default:
          break
      }
    },
    beforeFieldEdit(type) {
      return {
        type: type
      }
    },

    chartFieldEdit(param) {
      this.currEditField = JSON.parse(JSON.stringify(param.item))
      switch (param.type) {
        case 'copy':
          this.currEditField.id = null
          this.currEditField.extField = 1
          this.showChartCalcField()
          break
        case 'edit':
          this.showChartCalcField()
          break
        case 'delete':
          this.deleteChartCalcField(param.item)
          break
      }
    },
    handleChartFieldEdit(item, type) {
      return {
        type: type,
        item: item
      }
    },

    showChartCalcField() {
      this.editChartCalcField = true
    },
    closeChartCalcField() {
      this.editChartCalcField = false
      this.currEditField = {}
      this.initTableField(this.table.id)
      // 因动态计算较多，更新字段后重新计算视图数据
      this.calcData()
    },
    deleteChartCalcField(item) {
      this.$confirm(this.$t('dataset.confirm_delete'), this.$t('chart.tips'), {
        confirmButtonText: this.$t('dataset.confirm'),
        cancelButtonText: this.$t('dataset.cancel'),
        type: 'warning'
      }).then(() => {
        post('/chart/field/delete/' + item.id + '/' + this.panelInfo.id, null).then(response => {
          this.$message({
            type: 'success',
            message: this.$t('chart.delete_success'),
            showClose: true
          })
          this.initTableField(this.table.id)
        })
      }).catch(() => {
      })
    },
    clearData(data) {
      this.view[data] = []
      this.calcData(true)
    }
  }
}
</script>

<style lang="scss" scoped>
.padding-lr {
  padding: 0 6px;
}

.itxst {
  margin: 10px;
  text-align: left;
}

.col {
  width: 40%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
}

.col + .col {
  margin-left: 10px;
}

.view-panel-row {
  display: flex;
  background-color: #f7f8fa;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 96px);
}

.view-panel-Mask {
  display: flex;
  height: calc(100vh - 80px);
  background-color: rgba(92, 94, 97, 0.7);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 350px;
  z-index: 2;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-panel {
  display: flex;
  height: 100%;
  background-color: #f7f8fa;
}

.blackTheme .view-panel {
  background-color: var(--MainBG);
}

.drag-list {
  height: calc(100% - 26px);
  overflow: auto;
  padding: 2px 0;
}

.item-dimension {
  padding: 2px 10px;
  margin: 2px 2px 0 2px;
  border: solid 1px #eee;
  text-align: left;
  color: #606266;
  /*background-color: rgba(35,46,64,.05);*/
  background-color: white;
  display: block;
  word-break: break-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
}

.blackTheme .item-dimension {
  border: solid 1px;
  border-color: var(--TableBorderColor);
  color: var(--TextPrimary);
  background-color: var(--MainBG);
}

.item-dimension + .item-dimension {
  margin-top: 2px;
}

.item-dimension:hover {
  color: #1890ff;
  background: #e8f4ff;
  border-color: #a3d3ff;
  cursor: pointer;
}

.blackTheme .item-dimension:hover {
  color: var(--Main);
  background: var(--ContentBG);
  cursor: pointer;
}

.item-quota {
  padding: 2px 10px;
  margin: 2px 2px 0 2px;
  border: solid 1px #eee;
  text-align: left;
  color: #606266;
  background-color: white;
  display: block;
  word-break: break-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
}

.blackTheme .item-quota {
  border: solid 1px;
  border-color: var(--TableBorderColor);
  color: var(--TextPrimary);
  background-color: var(--MainBG);
}

.item-quota + .item-quota {
  margin-top: 2px;
}

.item-quota:hover {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #b2d3a3;
  cursor: pointer;
}

.blackTheme .item-quota:hover {
  background: var(--ContentBG);
}

.el-form-item {
  margin-bottom: 0;
}

span {
  font-size: 12px;
}

.tab-header ::v-deep .el-tabs__header {
  border-top: solid 1px #eee;
  border-right: solid 1px #eee;
}

.tab-header ::v-deep .el-tabs__item {
  font-size: 12px;
  padding: 0 !important;
}

.blackTheme .tab-header ::v-deep .el-tabs__item {
  background-color: var(--MainBG);
}

.tab-header ::v-deep .el-tabs__nav-scroll {
  padding-left: 0 !important;
}

.tab-header ::v-deep .el-tabs__header {
  margin: 0 !important;
}

.tab-header ::v-deep .el-tabs__content {
  height: calc(100% - 40px);
}

.draggable-group {
  display: block;
  width: 100%;
  height: calc(100% - 6px);
}

.chart-icon {
  width: 20px !important;
  height: 20px !important;
}

.el-radio {
  margin: 5px;
}

.el-radio ::v-deep .el-radio__label {
  padding-left: 0;
}

.attr-style {
  height: calc(100vh - 76px - 60px - 40px - 40px);
}

.blackTheme .attr-style {
  color: var(--TextPrimary);
}

.attr-selector {
  width: 100%;
  height: 100%;
  margin: 6px 0;
  padding: 0 4px;
  display: flex;
  align-items: center;
  background-color: white
}

.blackTheme .attr-selector {

  background-color: var(--MainBG)
}

.disabled-none-cursor {
  cursor: not-allowed;
  pointer-events: none;
}

.chart-class {
  height: 100%;
  padding: 10px;
}

.table-class {
  height: calc(100% - 20px);
}

.dialog-css ::v-deep .el-dialog__title {
  font-size: 14px;
}

.dialog-css ::v-deep .el-dialog__header {
  padding: 20px 20px 0;
}

.dialog-css ::v-deep .el-dialog__body {
  padding: 10px 20px 20px;
}

.filter-btn-class {
  padding: 6px;
  border: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-error-class {
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ece7e7;
}

.blackTheme .chart-error-class {

  background-color: var(--MainBG)
}

.field-height {
  height: 100%;
  border-top: 1px solid #E6E6E6;
}

.blackTheme .field-height {

  border-top: 1px solid;
  border-color: var(--TableBorderColor) !important;
}

.padding-tab {
  padding: 0;
  height: 100%;
}

.tree-select-span {
  ::v-deep div.vue-treeselect__control {
    height: 32px !important;
    font-weight: normal !important;
  }
}

.drag-block-style {
  padding: 2px 0 0 0;
  width: 100%;
  min-height: 32px;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  background-color: white;
}

.blackTheme .drag-block-style {
  border: 1px solid;
  border-color: var(--TableBorderColor);
  background-color: var(--ContentBG);
}

.drag-placeholder-style {
  position: absolute;
  top: calc(50% - 2px);
  left: 0;
  width: 100%;
  color: #CCCCCC;
}

.blackTheme .drag-placeholder-style {
  color: var(--TextPrimary);
}

.drag-placeholder-style-span {
  padding-left: 16px;
}

.blackTheme .theme-border-class {
  color: var(--TextPrimary) !important;
  background-color: var(--ContentBG);
}

.blackTheme .padding-lr {
  border-color: var(--TableBorderColor) !important;
}

.blackTheme .theme-item-class {
  background-color: var(--MainBG) !important;
  border-color: var(--TableBorderColor) !important;
}

.icon-class {
  color: #6c6c6c;
}

.blackTheme .icon-class {
  color: #cccccc;
}

.result-count {
  width: 50px;
}

.result-count ::v-deep input {
  padding: 0 4px;
}

.radio-span ::v-deep .el-radio__label {
  margin-left: 4px;
}

.view-title-name {
  display: -moz-inline-box;
  display: inline-block;
  width: 130px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-left: 45px;
}

::v-deep .item-axis {
  width: 168px !important;
}

::v-deep .el-slider__input {
  width: 80px !important;
}

::v-deep .el-input-number--mini {
  width: 100px !important;
}

::v-deep .el-slider__runway.show-input {
  width: 80px !important;
}

.no-senior {
  width: 100%;
  text-align: center;
  font-size: 12px;
  padding-top: 40px;
  overflow: auto;
  border-right: 1px solid #e6e6e6;
  height: 100%;
}

.form-item-slider::v-deep.el-form-item__label {
  font-size: 12px;
  line-height: 38px;
}

.form-item::v-deep.el-form-item__label {
  font-size: 12px;
}

.field-name {
  display: inline-block;
  width: 90px;
  word-break: break-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: absolute;
  top: 2px;
}

.field-setting {
  position: absolute;
  right: 8px;
}

.father .child {
  visibility: hidden;
}

.father:hover .child {
  visibility: visible;
}

.field-split {
  height: calc(100% - 40px);
}

.field-split ::v-deep .fu-split-pane__left {
  padding-right: 0 !important;
}

.field-split ::v-deep .fu-split-pane__right {
  padding-left: 0 !important;
}

.view-panel-row ::v-deep .el-collapse-item__header {
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 0 0 6px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

.data-area-label {
  text-align: left;
  position: relative;
  width: 100%;
  display: inline-block;
}

.data-area-clear {
  position: absolute;
  top: 4px;
  right: 6px;
  color: rgb(135, 141, 159);
  cursor: pointer;
  z-index: 1;
}

.el-input-refresh-time {
  width: calc(50% - 4px) !important;
}

.el-input-refresh-unit {
  margin-left: 8px;
  width: calc(50% - 4px) !important;
}

.el-input-refresh-loading {
  margin-left: 4px;
  font-size: 12px !important;
}
</style>
